vue(三)—组件与组件的拆分

组件分为全局组件和局部组件，每个vue的组件都是vue实例，每个vue实例也都是组件， 组件定义后就可以多次的拿来当模板用每个组件里面都有一个模板属性template,data属性，methods属性，以及传参的属性props等，而最大的组件即Vue实例没有将template属性写出来时它默认的是template的值是它所绑定的挂载点下的所有内容

1、全局组件

用法如下：

<div id='block_1'> <input v-model:value = 'msg'/> <input type = 'submit' @click = 'handleClick'/> <do-list v-for='(item,index) of arr' :key = 'index' :item = 'item'></do-list>//将下面定义的do-list组件拿来用 </div> <script> //全局组件 Vue.component('do-list',{ props:['item'], template:'<li>{{item}}</li>' }); new Vue({ el:'#block_1', data:{ msg:'', arr:[] }, methods:{ handleClick:function() { this.arr.push(this.msg); this.msg = '' } } }) </script>

2、局部组件 用法如下：

<div id='block_1'> <input v-model:value = 'msg'/> <input type = 'submit' @click = 'handleClick'/> <do-list v-for='(item,index) of arr' :key = 'index' :content = 'item'></do-list> </div> <script> //局部组件 var doList = { props:['content'], template:'<li>{{content}}</li>' }; new Vue({ el:'#block_1', //局部组件必须要在vue实例中声明 components:{ 'do-list':doList }, data:{ msg:'', arr:[] }, methods:{ handleClick:function() { this.arr.push(this.msg); this.msg = '' } } }) </script>

两种组件显示效果如下： vue基础知识点: 一、vue安装&实例创建&挂载点&模板 二、指令详细使用及其区别&实例属性 三、组件与组件的拆分 四、Vue组件之$dispatch和$broadcast 五、vue组件之祖孙传后代provide和inject 六、Vue组件之详细理解并使用props和$emit()