平武建站

Vue组件及父子组件通信的示例分析-创新互联

这篇文章将为大家详细讲解有关Vue组件及父子组件通信的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

10年积累的网站制作、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有金沙免费网站建设让你可以放心的选择与我们合作。

什么是组件？

vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。

使用组件的好处？

1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发

vue中的组件

vue中的组件是一个自定义标签，vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素，封装可重用的代码

组件的基本组成：样式结构，行为逻辑，数据

注册组件

全局注册

可以在任何模板中使用，使用之前要先注册

语法：使用Vue.compontent(组件名，选项对象)

组件名命名约定：驼峰，烤串

在html中使用组件：使用烤串命名法

例如，注册Vue.compontent('my-compontent',{}),使用的时候


    
自定义下拉框

    
    
  // 全局注册组件   Vue.component('cus-list',{     data(){       return {                }     },     template:`       
        
          
                                                 
        
      
    `   })   new Vue({     el:"#app",     data:{            }   })

使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。

Vue组件及父子组件通信的示例分析 

组件.png

局部注册

在组件实例中通过选项对象注册，只在所注册的作用域中使用


    
自定义下拉框

    
    

局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。

Vue组件及父子组件通信的示例分析 

组件.png

父子组件间通信

父组件给子组件通信

父组件===》子组件（用props）

组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。

也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加 一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。


  
自定义下拉框

  
  

页面效果

Vue组件及父子组件通信的示例分析 

props传值.png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容

  • {{item}}

    • 2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"

    3、在触发子组件事件的时候，$emit 通知父组件 this.$emit("receive",item);

    4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}

    看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。

      
    
    自定义下拉框
    
    
    
  
            // 全局注册组件   Vue.component('cus-list',{     data(){       return {         selectShow:false,         val:''       }     },     props:['selectValue','list'],     template:`       
            
              
                                        
                       
          
        `,     methods:{       changeValue:function(value){         this.val = value;       }     }   })   Vue.component('list-li',{     props:['list'],     template:`              `,     methods:{       clickLi:function(item){         this.$emit("receive",item);       }     }   })   new Vue({     el:"#app",     data:{       list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']     }   })   

    组件最基本的应用就是如此，深入的应用，就会发现很多刚好玩的东西。

    关于“Vue组件及父子组件通信的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

    另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


    文章标题：Vue组件及父子组件通信的示例分析-创新互联
    文章来源：http://pwwzsj.com/article/eddig.html

    其他资讯