父子组件通信
绝大部分vue本身提供的通信方式,都是父子组件通信
最常见的组件通信方式之一,由父组件传递到子组件
最常见的组件通信方式之一,当子组件发生了某些事,可以通过event通知父组件
父组件可以向子组件传递style和class,它们会合并到子组件的根元素中
示例
父组件
importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{ HelloWorld, },};
子组件
{{msg}}
exportdefault{name:"HelloWorld",props:{msg:String, },};渲染结果:
如果父组件传递了一些属性到子组件,但子组件并没有声明这些属性,则它们称之为attribute,这些属性会直接附着在子组件的根元素上
不包括style和class,它们会被特殊处理
示例
父组件
<!--除 msg 外,其他均为 attribute--> importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{ HelloWorld, },};
子组件
{{msg}}
渲染结果:
子组件可以通过inheritAttrs: false配置,禁止将attribute附着在子组件的根元素上,但不影响通过$attrs获取
在注册事件时,父组件可以使用native修饰符,将事件注册到子组件的根元素上
示例
父组件
importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{ HelloWorld, },methods:{handleClick() {console.log(1); }, },};
子组件
Hello World
渲染结果
子组件可以通过$listeners获取父组件传递过来的所有事件处理函数
后续章节讲解
和v-model的作用类似,用于双向绑定,不同点在于v-model只能针对一个数据进行双向绑定,而sync修饰符没有限制
示例
子组件
- {{ num1 }} +
- {{ num2 }} +
父组件
<!--等同于--> importNumbersfrom"./components/Numbers.vue";exportdefault{components:{ Numbers, },data() {return{n1:0,n2:0, }; },};
在组件内部,可以通过$parent和$children属性,分别得到当前组件的父组件和子组件实例
后续章节讲解
父组件可以通过ref获取到子组件的实例
示例
详见:https://cn.vuejs.org/v2/api/?#provide-inject
如果一个组件改变了地址栏,所有监听地址栏的组件都会做出相应反应
最常见的场景就是通过点击router-link组件改变了地址,router-view组件就渲染其他内容
适用于大型项目的数据仓库
适用于中小型项目的数据仓库
组件通知事件总线发生了某件事,事件总线通知其他监听该事件的所有组件运行某个函数