有一个组件A,包含了组件B,组件B包含了组件C,那么组件A就是父组件,组件B就是子组件,组件C就是孙组件。
$attrs可以把父组件的值传给孙组件
1.在引用的子组件里绑定要传的值
<template> <div id="app"> <HelloWorld :test="hello"/> </div> </template>
2.在引用的孙组件里用v-bind绑定$attrs
<child v-bind="$attrs"></child>
3.在孙组件里打印出this.$attrs,可以获取到父组件的数据
mounted(){ console.log(this.$attrs.test); this.cdata = this.$attrs.test }
完整例子:
App.vue 父组件
<template> <div id="app"> <HelloWorld :test="hello"/> </div> </template> <script> import HelloWorld from ‘./components/HelloWorld‘ export default { name: ‘App‘, components: { HelloWorld }, data(){ return { hello:"hello" } }, } </script>
HelloWorld.vue子组件
<template> <div> <child v-bind="$attrs"></child> </div> </template> <script> import Child from ‘../components/Child‘ export default { name: "HelloWorld", components:{ Child }, data () { return { }; } } </script>
Child.vue 孙组件
<template> <div> {{cdata}} </div> </template> <script> export default { name: "Child", data () { return { cdata:"孙组件" }; }, mounted(){ console.log(this.$attrs.test); this.cdata = this.$attrs.test } } </script>
原文地址:https://www.cnblogs.com/luguankun/p/11708657.html
时间: 2024-11-03 19:00:45