关系图:
a t r r s : 包含父作用域中不作为 p r o p s 被试别(且获取)的特性绑定( c l a s s 、 s t y l e 除外),当一个组件没有声明任何 p r o p s 时,这里会包含所有父作用域的绑定( c l a s s 、 s t y l e 除外),且通过 v − b i n d = " atrrs:包含父作用域中不作为props被试别(且获取)的特性绑定(class、style除外),当一个组件没有声明任何props时,这里会包含所有父作用域的绑定(class、style除外),且通过v-bind=" atrrs:包含父作用域中不作为props被试别(且获取)的特性绑定(class、style除外),当一个组件没有声明任何props时,这里会包含所有父作用域的绑定(class、style除外),且通过v−bind="atrrs"传入父组件【父传孙专用,对于值】
l i s t e n e r s : 包含作用域中(不含 . n a t i v e 修饰器的) v − o n 事件监听,可以通过 v − o n = " listeners: 包含作用域中(不含.native修饰器的)v-on事件监听,可以通过v-on=" listeners:包含作用域中(不含.native修饰器的)v−on事件监听,可以通过v−on="listeners"传入内部组件【孙传父专用,对于事件】
A:父组件
<template>
<div id="father">
father {{tempdata1}}-{{tempdata2}}
<button @click="fu">fu</button>
<child :temp1="tempdata1" :temp2="tempdata2" @tempFn="fahterFn" :propsValue="propsValue"></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: { child },
data() {
return {
tempdata1: 'father1',
tempdata2: 'father2',
propsValue: '$attrs不会传递child组件中定义的props值'
}
},
created() {},
mounted() {},
computed: {},
watch: {},
methods: {
fahterFn(val1,val2) {
this.tempdata1 = val1;
this.tempdata2 = val2;
console.log('father function!',val1);
},
fu() {
this.tempdata1 = 'xixixi'
}
},
};
</script>
<style scoped lang="scss">
</style>
B:子组件
<template>
<div id="child">
<div>
child: {{$attrs}}-{{propsValue}}
</div>
<son v-bind="$attrs" v-on="$listeners"></son>
</div>
</template>
<script>
import son from './son.vue';
export default {
components: { son },
props: ['propsValue'],
data() {
return {
}
},
created() {},
mounted() {},
computed: {},
watch: {},
methods: {
},
};
</script>
<style scoped lang="scss">
</style>
C:孙组件
<template>
<div id="son">
son {{$attrs}}
<button @click="ab">dd</button>
</div>
</template>
<script>
export default {
components: {},
// props : ['temp1','temp2'], //如果不用$attrs的话可以采用props来接受,这样可以对 temp1、temp2字段的监听操作
data() {
return {
}
},
created() {},
mounted() {
// console.log("son=--this.$attrs",this.$attrs);
// console.log("son-0000this.$listeners",this.$listeners);
},
computed: {},
watch: {},
methods: {
ab() {
// this.$listeners.tempFn('dfdf','125') //这两种方法都可以,实现
this.$emit('tempFn','dfdf','125');
}
},
};
</script>
<style scoped lang="scss">
</style>
点击fu
点击dd