点餐微信小程序_Vue 创建组件的两种方法小结(必

日期：2021-01-08 类型：行业动态 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

Vue 创建组件的两种方法小结(必看)       Vue 创建组件的方法有哪些呢？下面小编就为大家分享一篇Vue 创建组件的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue.extend() 全局方法 生成构造器，创建子类

使用基础 Vue 构造器，创建一个“子类”。

这样写非常繁琐。于是vue进行了简化

id 是string类型，即是注册组件的名称

options 是个对象

// ponent1是标签名称
ponent('my-component1',{
 template: ' div This is ponent! /div '
var vm1 = new Vue({
 el: '#app1'

使用这种方式，Vue在背后会自动地调用Vue.extend()。

var vm2 = new Vue({
 el: '#app2',
 components: {
 // ponent2是标签名称
 'my-component2': {
 template: ' div This is ponent! /div '
 // ponent3是标签名称
 'my-component3': {
 template: ' div This is ponent! /div '
})

==局部注册都放在选项对象中创建==

ponents，里面可以定义多个组件。

简化后是这样的写法

 body 
 div id='box' 
 parent 
 /parent 
 /div 
 script src='js/vue.js' /script 
 script 
 ponent('parent',{
 template:` div h1 我是父组件 /h1 child /child /div `,
 components:{
 'child':{
 template:` h1 我是子组件 /h1 `
 new Vue({
 el:'#box'
 /script 
 /body

注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

页面上的样式结构就是

 div 
 h1 我是父组件 /h1 
 h1 我是子组件 /h1 
 /div

注意：用局部注册的子组件不能单独直接使用！

标签挂在div里，会报错

 div id='box' 
 child /child 
 /div

结果会报错。

以上这篇Vue 创建组件的两种方法小结(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。


上一篇：怎么请求小程序直播_详解vue通过NGINX布置在子目 返回下一篇：没有了