vue组件之间的传值可分为两种情况,一种是父子传值,另外一种是非父子传值
父子传值
父子传值可以分为以下两点:
父传子(主要用props)
1、props方法(主要常用的)
父组件向子组件传参,通过自定义属性的方式进行传值,在子组件中使用props定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。
// 写于父组件上
<Son :name="name"> </Son>
// 写于子组件
export default {
props:{
name:{
type:String,
default:"原创:wimpyKid0975",
required:false,
}
}
}
2、$refs方法(次要)
// 写于父组件上
<childRen ref="childRen"> </childRen>
<button @click="toValue">点击</button>
methods:{
toValue(){
this.msg = "这是父组件的值";
this.$refs.childRen.wimpyKid(this.msg);
}
}
// 写于子组件上
<div class="childRen">
{{msg}}
</div>
methods:{
wimpyKid(val){
this.msg = val;
}
}
子传父(主要用$emit)
1、$emit方法(主要常用的)
子组件向父组件传数据使用自定义事件, vue 组件提供了一个 emit(‘自定义事件名’, 传递的数据) ),子组件传递数据时,触发响应的事件函数,就会自动触发通过 $emit 给父组件绑定的自定义事件,自定义事件接受一个参数,参数就是子组件传递过来的数据。
// 写于父组件
<Son @wimpyKid="wimpyKidFn"> </Son>
export default{
methods:{
wimpyKidFn(value) {
}
}
}
// 写于子组件
this.$emit('wimpyKid', this.value)
2、$refs方法(次要)
// 写于父组件
<child ref="child"> </child>
methods:{
toValue(val){
this.msg = val
}
}
// 写于子组件
<div class="child">
<button @click="wimyKid">点击</button>
</div>
methods:{
wimyKid(val){
this.$parent.toValue(this.msg);
}
}
非父子传值
兄弟传参
兄弟组件之间的数据传递,通过 eventBus 来做中间的桥梁,传输方通过中间组件调用 $emit 传数据,接收方通过 $on 接受数据,两者之间的自定义属性名保持一致。
注:记得使用npm或者yarn下载eventBus,插件eventBus并不是vue自带的,请知悉!
// 传输方组件调用方式
import Bus from '自定义路径/EventBus.js'
Bus.$emit('set-value', this.setValue);
// 接收方接受参数
import Bus from '自定义路径/EventBus.js'
created() {
Bus.$on('set-value', val => {
this.wimpyKid = val;
})
}
爷孙传参
爷孙传参和父子传参一个道理,也有几分相似的地方,可以拿以下代码和父子传值的代码互相比较,即可知道相似之处。(与原理无关,只是个人为了方便记~)
爷传孙($attrs)
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (
class
和style
除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和style
除外),并且可以通过v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。此处摘自vue官方文档,点击跳转至官方文档
// 写于爷组件
<div id="app">
<Son :msg="msg"> </Son>
</div>
// 写于父组件(主要代码,不可省略)
<div class="son">
<Grandson v-bind="$attrs"> </Grandson>
</div>
// 写于孙组件
<div class="grandson">
{{ msg }}
</div>
// 利用 props 接收数据
props:{ msg:String,}
孙传爷($listeners)
包含了父作用域中的 (不含
.native
修饰器的)v-on
事件监听器。它可以通过v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。此处摘自vue官方文档,点击跳转至官方文档
// 写于爷组件
<div id="app">
<Son @setVal="setVal"> </Son>
</div>
methods:{
setVal(val) {
this.msg = val;
}
}
// 写于父组件
<div class="son">
<Grandson v-on="$listeners"> </Grandson>
</div>
// 写于孙组件
<div class="grandson">
<button @click="toVal">点我</button>
</div>
methods:{
toVal() {
this.$emit("setVal",this.msg)
}
}
vuex
另外,无关是否为父子传值的方法,Vuex存储数据
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
此处摘自vuex官方文档,点击跳转至官方文档
提示
另外,还有父子传参的话,还可用 $children 和 $parent,这里就不做太多解析,若想了解,后续文章会给出,主要是此方法不推荐用,存在着太大的变故哈~