vue组件挂载与html加载区别,基于Vue全局组件与局部组件的区别说明

1、组件声明

这是{{name}}

这是{{data}}

var father = {

template: "#father",

data: function() {

return {

name: "一个全局组件-模板-",

data: "数据：18892087118"

}

}

};

2、组件注册

vue.component('father', father);

3、组件挂载

全局组件1

4、组件实例

vue2.0 --- 局部组件与全局组件

vue2.0局部组件与全局组件

局部组件

---

全局组件1

---

全局组件2

这是{{name}}

这是{{data}}

这是{{name}}

这是{{data}}

这是{{name}}

{{cmsgtwo}}

{{cmsg}}

{{fromfather}}

{{fromfather.fmsg}}

// 定义组件

var father = {

template: "#father",

data: function() {

return {

name: "一个全局组件-模板-",

data: "数据：18892087118"

}

}

};

var child = {

template: "#child",

data: function() {

return {

name: "子组件",

cmsg: "子组件里的第一个数据",

cmsgtwo: "子组件里的第二个数据"

}

},

methods: {

change: function() {

this.fromfather.fmsg = "子组件数据被更改了"

}

},

mounted: function() {

this.cmsg = this.fromfather;

},

props: ["fromfather"],

};

// 注册组件

vue.component('father', father);

vue.component("child", child);

var vm = new vue({

data: {

fmsg: "data里的数据",

givedata: {

fmsg: "这是父组件里的数据"

}

},

methods: {},

// 局部组件fatherlocal

components: {

'fatherlocal': {

template: '#father-local',

data: function() {

return {

name: "局部-父组件",

data: "局部-父组件里的数据"

}

}

}

}

}).$mount('#app');

6、特殊的属性is

当使用 dom 作为模板时 (例如，将el选项挂载到一个已存在的元素上)，你会受到 html 的一些限制，因为 vue 只有在浏览器解析和标准化 html 后才能获取模板内容。尤其像这些元素

• ，

1. ，

自定义组件被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性：

vue.component("my-component",{

template:"

{{message}}

",

data:function(){

return {

message:"hello world"

}

}

});

new vue({

el:"#app1"

})

补充知识：vue组件之入门：全局组件三种定义

不论我们使用哪种方式创建出来的组件，组件中的template属性指向的模板内容中，必须有且只有一个根元素，其他元素必须在这个根元素下面。

1.使用vue.extend配合vue.component定义全局组件

在使用vue.extend配合vue.component定义全局组件时，vue.extend里面定义template模板，而vue.component里面是要注册一个组件。

//第一步：使用vue.extend来创建全局组件

var com1 = vue.extend({

//通过template模板的属性来展示组件要显示的html

template: '

使用vue.extend创建全局组件

'

});

//第二步：使用 vue.component('组件名称',创建出来的组件模板对象)

vue.component('mycompnent', com1);

// 创建 vue 实例，得到 viewmodel

var vm = new vue({

el: '#app',

data: {},

methods: {}

});

【注意】在定义注册组件时，组件的名称不需要按照驼峰命名，但是在页面引入组件时，组件的名称必须按照驼峰命名。

简写如下：

2.直接使用vue.component定义全局组件

这里是直接使用vue.component直接创建一个组件

vue.component('mycom2', {

template: '

直接使用vue.component创建组件

'

});

// 创建 vue 实例，得到 viewmodel

var vm = new vue({

el: '#app',

data: {},

methods: {}

});

3.vue外部直接定义template

这是通过template元素，在外部定义组件的结构，有代码的提示和高亮

vue.component('mycom3', {

template: "#tmp1"

});

var vm = new vue({

el: '#app',

data: {},

methods: {}

});

以上这篇基于vue全局组件与局部组件的区别说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。