v-bind=“$props“学习笔记（二）

层层传递，祖孙三代
v-bind=’$props’ 可以将父组件所有的props下发给子组件

GrandFather.vue

<template>
  <div>
    <Father :name="'大哥'" :age="34" :job="'cxy'"></Father>
  </div>
</template>

<script>
import Father from "./Father";

export default {
  name: "GrandFather",
  components: {
    Father
  },
  data() {
    return {}
  }
}
</script>

<style scoped>

</style>

Father.vue

<template>
<div>
  {{name}}
  <son v-bind="$props"></son>
</div>
</template>

<script>
import son from "./fatherCompont/Son";
export default {
  name: "Father",
  data(){
    return{
      subVal1:'',
      subVal2:'',
    }
  },
  components:{
    son
  },
  methods:{
    receive(data){
      console.log(data)
    }
  },
  props:{
    name:{
      type:String
    },
    age:{
      type: Number
    },
    job:{
      type:String
    },
    hobb:{
      type:String
    },
  },
}
</script>

<style scoped>

</style>

son.vue

<template>
<div>
  son{{$props}}
</div>
</template>

<script>
export default {
  name: "Son",
  props:{
    name:{
      type:String
    },
    age:{
      type: Number
    },
    job:{
      type:String
    },
  },
  data(){
    return{
      subVal:'son咻咻咻'
    }
  },
  mounted() {
    this.$emit('dataVal1',this.subVal)//发送方式1
    this.$emit('update:dataVal2',this.subVal)//发送方式1
  }
}
</script>

<style scoped>

</style>

运行结果：