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>

运行结果：