
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
组件间通信的分类可以分成以下四种:
主要有以下8种:
props
属性,定义接收父组件传递过来的参数Children.vue
// Vue 官网中提到 prop 的定义应该尽量详细,至少需要指定其类型
// 反例
props: [ 'age' ]
// 好例子
props: {
age: {
type:Number, // 接收的类型为数值
defaule:18, // 默认值为18
require:true // age属性必须传递
}
}
$emit触发
自定义事件,$emit
第二个参数为传递的数值Children.vue
this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event, payload)" />
ref
ref
来获取数据<Children ref="foo" />
this.$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据
EventBus
$emit
触发自定义事件,$emit
第二个参数为传递的数值$on
监听自定义事件创建一个 bus.js 文件
import Vue from 'vue'
export default new Vue
A.vue
bus.$emit('foo', params)
B.vue
bus.$on('foo', payload)
$parent
或者$root
搭建通信桥连兄弟组件
this.$parent.on('add',this.add)
另一个兄弟组件
this.$parent.emit('add')
$attrs
和 $listeners
prop
被识别 (且获取) 的特性绑定 ( class 和 style 除外)。v-bind="$attrs"
传⼊内部组件// child:并未在 props 中声明 foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
// 父组件
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// 子组件
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// 孙组件
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>
provide
属性,返回传递的值inject
接收组件传递过来的值祖先组件
provide(){
return {
foo:'foo'
}
}
后代组件
inject:['foo'] // 获取到祖先组件传递过来的值
适用场景: 复杂关系的组件数据传递
Vuex
作用相当于一个用来存储共享变量的容器
state
用来存放共享变量的地方
getter
,可以增加一个getter
派生状态,(相当于store
中的计算属性),用来获得共享变量的值
mutations
用来存放修改state
的方法。
actions
也是用来存放修改state的方法,不过action
是在mutations
的基础上进行。常用来做一些异步操作
props
与 $emit
进行传递,也可选择ref
$bus
,其次可以选择$parent
进行传递attrs
与listeners
或者 Provide
与 Inject
vuex
存放共享的变量