Vue中全局组件与局部组件有什么不同？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
1、组件声明
<!-- 全局组件模板father模板 --> <template id="father"> <div> <h4>这是{{name}}</h2> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", data: function() { return { name: "一个全局组件-模板-", data: "数据：18892087118" } } };2、组件注册
Vue.component('father', FATHER);3、组件挂载
<h6>全局组件1</h6> <father></father>
4、组件实例
<!DOCTYPE html> <html> <head> <title>vue2.0 --- 局部组件与全局组件</title> </head> <body> <h4>vue2.0局部组件与全局组件</h4> <div id='app'> <h6>局部组件</h6> <fatherlocal></fatherlocal> <hr> <h6>全局组件1</h6> <father></father> <hr> <h6>全局组件2</h6> <child :fromfather='giveData'></child> </div> <!-- 局部组件模板fatherlocal --> <template id="father-local"> <div> <h4>这是{{name}}</h2> <div> <p>这是{{data}}</p> </div> </div> </template> <!-- 全局组件模板father --> <template id="father"> <div> <h4>这是{{name}}</h2> <div> <p>这是{{data}}</p> </div> </div> </template> <template id="child"> <div> <h4>这是{{name}}</h4> <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:"<h2>{{message}}</h2>", data:function(){ return { message:"hello world" } } }); new Vue({ el:"#app1" }) </script> </body>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
