1、组件声明
<!-- 全局组件模板father模板 -->
<template id=\"father\">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
var FATHER = {
template: \"#father\",
data: function() {
return {
name: \"一个全局组件-模板-\",
data: \"数据：18892087118\"
}
}
};
2、组件注册
Vue.component(\'father\', FATHER);
3、组件挂载
<h5>全局组件1</h5> <father></father>
4、组件实例
<!DOCTYPE html>
<html>
<head>
<title>vue2.0 --- 局部组件与全局组件</title>
</head>
<body>
<h3>vue2.0局部组件与全局组件</h3>
<div id=\'app\'>
<h5>局部组件</h5>
<fatherlocal></fatherlocal>
<hr>
<h5>全局组件1</h5>
<father></father>
<hr>
<h5>全局组件2</h5>
<child :fromfather=\'giveData\'></child>
</div>
<!-- 局部组件模板fatherlocal -->
<template id=\"father-local\">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<!-- 全局组件模板father -->
<template id=\"father\">
<div>
<h3>这是{{name}}</h1>
<div>
<p>这是{{data}}</p>
</div>
</div>
</template>
<template id=\"child\">
<div>
<h3>这是{{name}}</h3>
<div>
<p>{{cmsgtwo}}</p>
<p>{{cmsg}}</p>
<p>{{fromfather}}</p>
<p>{{fromfather.fmsg}}</p>
<p><input type=\"button\" value=\"按钮\" @click=\" \"></p>
</div>
</div>
</template>
<script src=\"vue_2.2.2_vue.min.js\"></script>
<script type=\"text/javascript\">
// 定义组件
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\');
</script>
</body>
</html>
6、特殊的属性is
当使用 DOM 作为模板时 (例如，将el选项挂载到一个已存在的元素上)，你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>这样的元素只能出现在某些其它元素内部。
自定义组件<my-row>被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性：
<body>
<div id=\"app1\">
<ul>
<li is=\"my-component\"></li>
</ul>
</div>
<script>
Vue.component(\"my-component\",{
template:\"<h1>{{message}}</h1>\",
data:function(){
return {
message:\"hello world\"
}
}
});
new Vue({
el:\"#app1\"
})
</script>
</body>
总结
以上所述是小编给大家介绍的Vue全局组件与局部组件的区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容