Vue祖孙组件传值

祖传孙

方法一：props

传递次序：GrandFather → Father → GrandSon

1、在 GrandFather 中给 Father 传递了一条消息。

GrandFather.vue

<template>
  <div class="parent">
    🎈爷爷
    <Father :msg1="msg1" :msg2="msg2" />
  </div>
</template>

<script>
import Father from './Father'
export default {
  components: {Father},
  data () {
    return {
      msg1: '1️⃣我是GrandFather，把第二条传给GrandSon',
      msg2: '2️⃣GrandSon你好，我是GrandFather'
    }
  }
}
</script>

2、Father 中使用 props 接收了来自 GrandFather 的所有消息，把消息通过props传给 GrandSon
Father.vue

<template>
  <div class="parent">
    🎈父亲
    <p>GrandFather说：{{msg1}}。{{msg2}}</p>
    <GrandSon :msg2="msg2" />
  </div>
</template>

<script>
import GrandSon from './GrandSon'
export default {
  props: ['msg1', 'msg2'],
  components: {GrandSon},
}
</script>

3、终于到 GrandSon 了，它通过 props 从 Father 那里接收到了来自 GrandFather 的消息
GrandSon.vue

<template>
<div class="child">
  🎈孙子
  <p>GrandFather说：{{msg2}}</p>
</div>
</template>

<script>
export default {
  props: ['msg2']
}
</script>

方式二：$attrs
上面的 $props 传值方式必须要经过 Father 接收之后继续传递，不方便。

vue 在 2.4.0 版本中新增了 $attrs 属性。根据前面的理解 $attrs就是没有在props中声明要接收的一些属性。此外，还可以通过v-bind="$attrs" 把来自父组件的一些属性直接传递到子组件中。

这样一来，Father组件就没必要在 props 中声明接收那些不必要属性了。看看实例吧！

① GrandFather 组件不用做修改

② 这次在 Father 中只在 props 接收了 msg1，与自己无关的直接使用 v-bind=“attrs” 绑定到子组件上。

当然，在 Father 中还是可以访问 $attrs的。在代码中访问要使用this.$attrs
Father.vue

<template>
  <div class="parent">
    🎈父亲
    <p>$attrs：{{$attrs}}</p>
    <GrandSon v-bind="$attrs" />
  </div>
</template>

<script>
import GrandSon from './GrandSon'
export default {
  props: ['msg1'], //只接收了msg1
  components: {GrandSon},
}
</script>

孙传祖

$listeners
给 Father 组件绑定 自定义事件 getReply ,便于后面在 GrandSon 中触发

GrandFather.vue

<template>
  <div class="parent">
    🎈爷爷
    <div>GrandSon的回复：{{reply}}</div>
    <Father :msg1="msg1" :msg2="msg2" @getReply="getReply"/>
  </div>
</template>

<script>
import Father from './Father'
export default {
  components: {Father},
  data () {
    return {
      msg1: '1️⃣我是GrandFather，把第二条传给GrandSon',
      msg2: '2️⃣GrandSon你好，我是GrandFather',
      reply: '' //接收来自GrandSon的消息
    }
  },
  methods: {
    /* 将获得的数据绑定到data中，便于视图层渲染 */
    getReply (param) {
      this.reply = param
    }
  }
}
</script>

在 Father 中使用 v-on="$listeners" 把 GrandFather 的事件绑定到 GrandSon

Father.vue

<template>
  <div class="parent">
    🎈父亲
    <p>$attrs：{{$attrs}}</p>
    <GrandSon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from './GrandSon'
export default {
  props: ['msg1'],
  components: { GrandSon },
}
</script>

在 GrandSon 中触发来自 GrandFather 的自定义事件就 🆗 了，有两种方式。

① this.$ listeners.eventName(param)
② this.$emit(eventName, param)

GrandSon.vue

<template>
<div class="child">
  🎈孙子
  <p>GrandFather说：{{msg2}}</p>
  <button @click="reply">回复GrandFather</button>
</div>
</template>

<script>
export default {
  props: ['msg2'],
  data () {
    return {
      replyWord: 'GrandFather你好，我是GrandSon，收到消息了'
    }
  },
  methods: {
    reply () {
      this.$emit('getReply', this.replyWord)
      // this.$listeners.getReply(this.replyWord)
    }
  }
}
</script>