透传 Attributes实现父子传值

1.理解：

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。组件可以用$attrs接收到透传的值。

2. 代码

2-1.父组件

<template>
	<view class="content">
		<test-cns2 class="avtive" :msg="msg"></test-cns2>  //声明msg
		<input type="text" v-model="msg">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:1
			}
		}
	}
</script>

<style scoped>

</style>

2-2.子组件

//子组件并未声明props接收，可以使用$attrs接收
<template>
	<div class="test-cns">
		{{$attrs.msg}}  
	</div>
</template>

<script>
	export default{
		watch:{
			'$attrs.msg'(newV){
				console.log(newV)  //监听$attrs变化
			}
		}
	}
</script>