祖孙组件传值

爷爷传值给孙子

props

• 爷爷组件中

<div id="app">
  <p>我是爷爷组件：{{message}}</p>
  <cpn :message="message"></cpn>
</div>
data: {
  message: "你好啊孙子",
},

• 父亲组件中

<div>
  <p>我是父组件：{{message}}</p>
  <scpn :message="message"></scpn>
</div>
props: {
  message: String,
},

• 孙子组件中

<div>
  <p>我是孙子组件：{{message}}</p>
</div>
props: {
  message: String,
},

$attrs

其实就是本来父亲组件用props来接收值再传递，现在改成用$attrs来接收值

• 爷爷组件中

<div id="app">
  <p>我是爷爷组件：{{message}}</p>
  <cpn :message="message"></cpn>
</div>
data: {
  message: "你好啊孙子",
},

• 父亲组件中

<div>
  <p>我是父组件：{{$attrs}}</p>
  <scpn v-bind="$attrs"></scpn> //主要变化在这里
</div>

• 孙子组件中

<div>
  <p>我是孙子组件：{{message}}</p>
</div>
props: {
  message: String,
},

孙子传值给爷爷

$listeners

• 爷爷组件中

<p>我是爷爷组件：{{listen}}</p>
<cpn @listen="stalk"></cpn>
data: {
  listen:'',
},
methods:{
  stalk(val){
  this.listen = val
}

• 父亲组件中

<p>我是父组件</p>
<scpn v-on="$listeners"></scpn> //关键用法在这里

• 孙子组件中

<div><button @click="talk()">我是孙子组件</button></div>
data(){
  return{
    information:'爷爷我来啦',
  }
},
methods:{
  talk(){
    this.$emit('listen',this.information) //两条语句任选一句都可以
    this.$listeners.listen(this.information)
  }
}