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
inheritAttrs: false 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性