深入浅析Vue全局组件与局部组件的区别

2019-11-19 13:38:42

字体：大中小

来源：转载

供稿：网友

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全局组件与局部组件的区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：基于jQuery实现的设置文本区域的光标位置

下一篇：react-native android状态栏的实现