Vue vm.$attrs使用场景详解

<template>
  <div>
    <childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom>
  </div>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'张三',
      'age':'30',
      'sex':'男'
    }
  },
  components:{
    'childcom':{
      props:['name'],
      template:`<div>
        <div>我是子组件  {{name}}</div>
        <grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
      </div>`,
      components: {
        'grandcom':{
          template:`<div>我是孙子组件-------<button @click="grandChangeName">改变名字</button></div>`,
          methods:{
            grandChangeName(){
              this.$emit('testChangeName','kkkkkk')
            }
          }
        }
      }
    }
  },
  methods:{
    changeName(val){
      this.name = val
    }
  }
}
</script>

页面渲染如下：

$listeners可以让你在孙子组件改变父组件的值，是不是很方便…………

到此这篇关于vm.$attrs使用场景详解的文章就介绍到这了,更多相关vm.$attrs使用内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！