vue$attrs的使用全面解析

<template>
  <div>
    <el-table :data='list'>
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="study"
        label="学习科目"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click='transmitClick(scope.row)'>传递</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 儿子组件 -->
    <ChildView
      :is-show="isOpen"
      :row="row"
    >
    </ChildView>
  </div>
</template>

<script>
import ChildView from './Child.vue'
export default {
  components: { ChildView },
  data() {
    return {
      isOpen: false,
      row: {},
      list: [
        { name: '王丽', study: 'Java' },
        { name: '李克', study: 'python' }
      ]
    }
  },
  methods: {
    // 传递事件
    transmitClick(row) {
      this.isOpen = true;
      this.row = row
    }
  }
}
</script>

<template>
  <div class='child-view'>
    <p>儿子组件</p>
    <GrandChild v-bind="$attrs"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default {
  // 继承所有父组件的内容
  inheritAttrs: true,
  components: { GrandChild },
  data() {
    return {
    }
  }
}
</script>

<style lang="stylus">
.child-view {
  margin: 20px
  border: 2px solid red
  padding: 20px
}
</style>

<template>
  <div class='grand-child-view'>
    <p>孙子组件</p>
    <p>传给孙子组件的数据：{{row.name}} {{row.name !== undefined? '学习' : ''}} {{row.study}}</p>
  </div>
</template>

<script>
export default {
  // 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  inheritAttrs: false,
  // 在本组件中需要接收从父组件传递过来的数据，注意props里的参数名称不能改变，必须和父组件传递过来的是一样的
  props: {
    isshow: {
      type: Boolean,
      dedault: false
    },
    row: {
      type: Object,
      dedault: () => { }
    }
  }
}
</script>

<style lang="stylus">
.grand-child-view {
  border: 2px solid green
  padding: 20px
  margin: 20px
}
</style>

<div id="app">
    Parent:  {{msg}}
    <son-component v-bind:msg="msg"></son-component>
</div>
let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用props接收
    components:{
      'son-component': {
        props: [
          'msg'
        ],
        template:`<div>Son:  <grandson-component v-bind:msg="msg"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})

let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用$attrs接收
    components:{
      'son-component': {
        // props: [
        //   'msg'
        // ],
        template:`<div>Son:  <grandson-component v-bind="$attrs"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})