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.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:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺'] } })