Description

传值就是为了联动，能够及时准确传值获取值才是王道。

Valuation Methods

props和$emit

props是父传子，$emit是子传父。

props的使用

父组件传出值

<tableList ref="table" :options="options" :header-data="Columns" :table-data="Data" />

父组件的中的子组件标签上我们加入的options，headerData，tableData三个变量是准备要传给子组件的。

子组件收到值

props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },

    headerData: {
      type: Array,
      default: () => {
        return []
      }
    },

    options: {
      type: Object,
      default: () => {
        return {
          multiSelect: true, // boolean 是否多选
          singleSelect: false, // boolean 是否单个checkbox
          isindex: false, // boolean 是否展示序列号
          stripe: true, // boolean 斑马纹
          border: true, // boolean 纵向边框
          size: 'medium', // String  medium / small / mini  table尺寸
          fit: true, // 自动撑开
          pagination: true, // 是否有分页
          numPage: false
        }
      }
    },

}

延申

属性/方法	作用
type	传值的类型
default	默认值；如果没有传，就使用
requied	值为true/false，代表是否父组件是否必须传
validator（val）{}	可以判断父组件传过来的值是否有效

props：{
    name：{

        type：String，
        default：'默认为王三'，
        required：true，
        validator(val){
            
            return val>0&&val<10
        }

    }

}

$emit的使用

子组件传出值

that.$emit('usbKeyForm', that.usbKeyForm)

父组件收到值

<certificateDialog :ssuingName="ssuingName" @usbKeyForm="usbKeyForm"/>


methods: {
    usbKeyForm(val) {
      this.SerialNumber = val.SerialNumber
    },
}

思考：为什么两种方法不一样呢？

首先要明白传值的前提，为什么要传值，因为作用域。其实在Vue.js中每个组件都有自己的作用域，而且每个组件定义了一个props属性可以去接收父组件传过来的值，而且定义了type类型就是为了确定父级传过来的值的类型就是我们需要的，当然也可以修饰数据。如果加入required属性，值为true的时候，要求父组件必须要传的。default是设置默认值的，如果父组件没有传我们就使用默认值。所以我们经常看到使用props时候经常使用type+default两个属性搭配使用。

$emits传值原理是通过事件系统进行传值的，因为作用域是上下关系，你要是像下上关系，就得需要闭包传值。

$attrs和$listeners

组件关系A组件---》B组件----》C组件；大家都知道props和$emit是最常用的传值方法，但是仅限A到B或者B到A，如果A到C或者C到A呢？就需要用到$attrs和$listeners了

$attrs的使用

$attrs可以继承父组件里边的属性数据，并且携带下去。

通俗地来说就是如果从父组件传过来的值，没有在子组件中被接收，那么这些值就会被存在$attrs对象中。

爷组件传出值

<son title="aaaaaaaaaaa" name="李四"/>

子组件收到值（子组件作为中间组件继续传递 v-bind="$attrs"）

<template>
  <div>
      儿子组件：{{$attrs.name}}
      <div>
         <sunzi v-bind="$attrs"/>
      </div>
  </div>
</template>
 
<script>
import sunzi from './sunzi.vue';
export default {
  inheritAttrs: true,
  components:{sunzi},
  mounted(){
      console.log(this.$attrs)  //{title:"aaaaaaaaaaa" name:"李四"}
  }
}

孙子组件收到值(孙子组件使用 inheritAttrs: false）

<template>
  <div>孙:{{name}}{{title}}</div>
</template>
 
<script>
export default {
 inheritAttrs: false,
  props: [
    "name",
    "title", //注意props里的参数名称不能改变，必须和父组件传递过来的是一样的
  ],
  data() {
    return {};
  },
  mounted(){
      console.log(this.$attrs) //可直接使用数据或者调用根组件的方法
  }
};

或者

 
<template>
  <div>
      或者：{{$attrs.name}},{{$attrs.title}}
  </div>
</template>
 
<script>
export default {
 inheritAttrs: false,
  data() {
    return {};
  },
  mounted(){
      console.log(this.$attrs)//可直接使用数据或者调用根组件的方法
  }
};
</script>

inheritAttrs: false 的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs可以获取到没有使用的注册属性。

inheritAttrs: false 是不会影响 style 和 class 的绑定

inheritAttrs: true