网站后台添加文章后怎么不显示,网站设计客户需求,重庆商会网站建设,微信分身版下载微信2vue2面试题#xff1a;vue组件之间的通信方式有哪些#xff1f; 回答思路#xff1a;1.组件通信的目的--2.组件通信的分类--3.组件通信的方案1.组件通信的目的2.组件通信的分类3.组件通信的方案#xff08;1#xff09;通过props传递数据#xff08;2#xff09… vue2面试题vue组件之间的通信方式有哪些 回答思路1.组件通信的目的--2.组件通信的分类--3.组件通信的方案1.组件通信的目的2.组件通信的分类3.组件通信的方案1通过props传递数据2$emit触发自定义事件3ref4EventBus5parent、root6attrs与listeners7provide与inject8vuex 小结 回答思路1.组件通信的目的–2.组件通信的分类–3.组件通信的方案
1.组件通信的目的
每个组件之间都有自己独自的作用区域组件之间的数据是无法共享的但在实际开发工作中我们常常需要让座组件之间共享数据这也是组件通信的目的
2.组件通信的分类
组件间通信的分类可分为以下 1.父子组件之间的通信 2.兄弟组件之间的通信 3.祖孙与后代组件之间的通信 4.非关系组件之间的通信
3.组件通信的方案
1通过props传递数据
1.适用场景父组件传递数据给子组件 2.组件设置props属性定义接收父组件传过来的参数 3.父组件在使用子组件标签中通过字面量来传递值 children.vue:
props:{name:Stringage:{type:Number,default:18,require:true }
}father.vue:
children nametom age182$emit触发自定义事件
1.适用场景子组件传递数据给父组件
2.子组件通过$emit触发自定义事件 $emit第二个参数为传递的值
3.父组件绑定监听器获取到子组件传过来的参数 children.vue:
this.$emit(add,1)father.vue:
children addnumAdd($event) /3ref
1.适用场景子组件传递数据给父组件
2.父组件通过设置子组件ref来获取数据 father.vue:
children reffoo
divthis.$refs.foo/div4EventBus
1.适用场景:兄弟组件传值
2.创建一个中央事件总线EventBus
3.兄弟组件通过$emit触发自定义事件第二个参数传递的值
4.另一个兄弟组件通过$on监听自定义事件
//
class Bus { constructor() { this.callbacks {}; // 事件的名字} $on(name, fn) { this.callbacks[name] this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) cb(args)); } }
} // main.js
Vue.prototype.$bus new Bus() // 将$bus挂载到 vue实例的原型上
// 另一种方法
Vue.prototype.$bus new Vue() // Vue已经实现了 Bus的功能
children1.vue:
this.$bus.$emit(foo)在这里插入代码片children2.vue:
this.$bus.$on(foo,2)5parent、root
通过共同祖辈$parent或者 $root搭建通信桥
兄弟组件
this.$parent.on(add,this.add)另一个兄弟组件
this.$parent.emit(add)6attrs与listeners
1.适用场景祖先传递数据给子孙
2.设置批量向下传属性$attrs和 $listeners
3.class,style等非props属性也是通过$attrs可以将父组件中的这些特定绑定属性传递给子组件
4.可以通过v-bind$attrs传入内部组件
// child没有在 props中声明 foo
p{{$attrs.foo}}/p // parent
HelloWorld foofoo/// 给Grandson隔代传值
Child2 msglalala some-eventonSomeEvent/Child2 // Child2 的儿子
Grandson v-bind$attrs v-on$listeners/Grandson // Grandson 中
div click$emit(some-event, msg from grandson)
{{msg}}
/div
7provide与inject
1.在祖先组件定义Provide属性返回传递的值
2.在后代组件通过inject接收组件传递过来的值 祖先组件
!-- 祖先组件 --
templatedivchild-component/child-component/div
/templatescript
export default {provide: {message: Hello from ancestor,count: 10},components: {ChildComponent}
}
/script后代组件
!-- 后代组件 --
templatedivp{{ message }}/pp{{ count }}/p/div
/templatescript
export default {inject: [message, count]
}
/script8vuex
1.适用场景复杂关系的组件数据传递 2.vuex作用相当于一个用来存储共享变量的容器 3.state用来存放共享变量的地方 3.getter可以增加一个getter派生状态相当于store中的计算属性用来获得共享变量的值 4.mutations用来存放修改state的方法 5.actions也是用来存放修改state的方法在mutations的基础上进行常用来做一些异步操作
小结
1.父子数据传递props$emit,ref
1.1父传子props
1.2子传父$emit、ref 2.兄弟数据传递eventbus$parent
3.祖孙与后代数据传递attrs与listeners或provide与inject
4.复杂关系数据传递vuex
