props,emit,v-bind=“$props“,v-bind=“$attrs“,v-on=“$listeners“

记录一下vue传值

1.props 这个是vue中很常见的一个传值方式具体使用方式如下

//子组件
<template>
    <div>
        我是儿子，我的年龄为{{age}}
        <div>
            我的名字是{{name}}
        </div>
    </div>
</template>

<script>
  export default {
    props:{
      age:{
        type:Number
      },
      name:{
        type:String
      }
    },
  }
</script>

<style scoped>

</style>

//父组件
<template>
    <div>
        <son  :age="12" :name="'小明'" />
    </div>
</template>

<script>
  import son from "./son";
  export default {
    name: "father",
    data(){
      return{
        tit:'我是父辈的组件'
      }
    },
    components:{
      son
    },

  }
</script>

<style scoped>

</style>

2.emit 一般来说 我们子穿父的时候用这个

//子组件
<template>
    <div>
        我是儿子，我的年龄为{{age}}
        <div>
            我的名字是{{name}}
        </div>
    </div>
</template>

<script>
  export default {
    props:{
      age:{
        type:Number
      },
      name:{
        type:String
      }
    },
    data(){
      return{
        subVal:'我被发送过去了'
      }
    },
    mounted() {
      this.$emit('dataVal1',this.subVal); //发送方式1
      this.$emit('update:dataVal2',this.subVal) //发送方式2
    }
  }
</script>

<style scoped>

</style>

//父组件
<template>
    <div>
<!--        第二种发送方式接收-->
        <son :data-val2.sync = 'subVal2'  />
        <hr>
<!--        第一种发送方式接收-->
         <son @dataVal1="receive" />
    </div>
</template>

<script>
  import son from "./son";
  export default {
    name: "father",
    data(){
      return{
        subVal1:'',
        subVal2:''
      }
    },
    components:{
      son
    },
    methods:{
      receive(data){
        console.log(data)
      }
    },


  }
</script>

<style scoped>

</style>

v-bind=’$props’ 可以将父组件所有的props下发给子组件

//爷爷辈的组件
<template>
    <div >
        <father :name="`爷爷`" :age="123" :classs="'狐妖'" ></father>
    </div>
</template>

<script>
    import father from "./father";
  export default {
    name: "grandfather",
    data(){
      return{
        tit:'我是爷爷辈的组件'
      }
    },
    components:{
      father
    },
    methods:{
      isclick(){
        console.log('我点击了这个东西')
      }
    }
  }
</script>

<style scoped>

</style>

//父级组件
<template>
    <div>
        <son v-bind="$props"></son>
    </div>
</template>

<script>
  import son from "./son";
  export default {
    name: "father",
    data(){
      return{
        subVal1:'',
        subVal2:''
      }
    },
    props:{
      name:{
        type:String
      },
      age:{
        type: Number
      },
      classs:{
        type:String
      }
    },
    components:{
      son
    },



  }
</script>

<style scoped>

</style>

//通过$props可以在son里拿到
<template>
    <div>
        我是儿子，我的年龄为{{age}}
        <div>
            我的名字是{{name}}
        </div>
        {{classs}}
    </div>
</template>

<script>
  export default {
    props:['name','age','classs']
  }
</script>

<style scoped>

</style>

v-bind=’$attrs’ : 上面的v-bind="props"需要层层传递不能隔代传递 attrs就可以解决这个问题

//爷爷组件
<template>
    <div >
        <father :name="`爷爷`" :age="123" :classs="'狐妖'" ></father>
    </div>
</template>

<script>
    import father from "./father";
  export default {
    name: "grandfather",
    data(){
      return{
        tit:'我是爷爷辈的组件'
      }
    },
    components:{
      father
    },
    methods:{
      isclick(){
        console.log('我点击了这个东西')
      }
    }
  }
</script>

<style scoped>

</style>

//父组件
<template>
    <div>
        <son v-bind="$attrs"></son>
    </div>
</template>

<script>
  import son from "./son";
  export default {
    name: "father",
    data(){
      return{
        subVal1:'',
        subVal2:''
      }
    },
    components:{
      son
    },
  }
</script>

<style scoped>

</style>

//孙子组件
<template>
    <div>
        我是儿子，我的年龄为{{age}}
        <div>
            我的名字是{{name}}
        </div>
        {{classs}}
    </div>
</template>

<script>
  export default {
    props:['name','age','classs']
  }
</script>

<style scoped>

</style>

v-on=’$listeners’ 与attrs用法是一样的

//孙子组件
<template>
   <div></div>
</template>

<script>
  export default {

    mounted() {
      this.$emit('subevent1','1')
      this.$emit('subevent2','2')
    }
  }
</script>

<style scoped>

</style>

//父组件
<template>
    <div>
        <son v-bind="$attrs" v-on="$listeners"></son>
    </div>
</template>

<script>
  import son from "./son";
  export default {
    name: "father",
    components:{
      son
    },
  }
</script>

<style scoped>

</style>

// 爷爷组件
<template>
    <div >
        <father  @subevent1="isclick"></father>

    </div>
</template>

<script>
    import father from "./father";
  export default {
    name: "grandfather",
    components:{
      father
    },
    methods:{
      isclick(data){
        console.log(data)
      }
    }
  }
</script>

<style scoped>

</style>

inheritAttrs 组件内未被注册的属性将作为普通html元素属性被渲染 inheritAttrs就是为了解决这个问题

当 inheritAttrs为true的时候

当inheritAttrs为false的时候