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

我不是女神ヾ 2022-01-27 11:57 487阅读 0赞

*  组件分为全局组件和局部组件，每个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>

两种组件显示效果如下：  
![在这里插入图片描述][20190526170622800.gif]  
vue基础知识点:  
[一、vue安装&实例创建&挂载点&模板][vue]  
[二、指令详细使用及其区别&实例属性][Link 1]  
[三、组件与组件的拆分][Link 2]  
[四、Vue组件之 d i s p a t c h 和 dispatch和 dispatch和broadcast][Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]  
[五、vue组件之祖孙传后代provide和inject][vue_provide_inject]  
[六、Vue组件之详细理解并使用props和$emit()  
][Vue_props_emit_]

[20190526170622800.gif]: /images/20220127/f25b50027c4f4bc8a8b9641c17a9129b.png
[vue]: https://blog.csdn.net/Sunday97/article/details/90413669?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008429819724839855179%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008429819724839855179&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-2-90413669.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 1]: https://blog.csdn.net/Sunday97/article/details/90447521?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-3-90447521.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 2]: https://blog.csdn.net/Sunday97/article/details/90578330?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-90578330.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]: https://blog.csdn.net/Sunday97/article/details/91443685?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-6-91443685.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[vue_provide_inject]: https://blog.csdn.net/Sunday97/article/details/91358599?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-7-91358599.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_props_emit_]: https://blog.csdn.net/Sunday97/article/details/91356575?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-8-91356575.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187