好资源导航 » 文章资讯 » 基于Vue全局组件与局部组件的区别说明

基于Vue全局组件与局部组件的区别说明

2023-07-18 23:25:04 78

1、组件声明




这是{{name}}

这是{{data}}



varFATHER={
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}}

//定义组件 varFATHER={ template:"#father", data:function(){ return{ name:"一个全局组件-模板-", data:"数据：18892087118" } } }; varCHILD={ 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); varvm=newVue({ 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后才能获取模板内容。尤其像这些元素