javascript VueJS:像v-bind="$props”一样将任何未知的props传递给子组件

tjrkku2a  于 2023-02-07  发布在  Java
关注(0)|答案(3)|浏览(138)

我希望接收父组件绑定到子组件的所有 prop ,而不在props:[]中提及,因为我不知道将绑定哪些 prop 。
父组件

<template>
  <div id="parentComponent">
    <child-component v-bind="anyPropsToPass"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './components/child-component/child-component'

  export default {
    name: 'app',
    components: {
      ChildComponent
    },
    data () {
      return {
        anyPropsToPass: {
          name: 'John',
          last_name: 'Doe',
          age: '29',
        }
      }
    }
  }
</script>

子组件

<template>
  <div>
    <p>I am {{name}} {{last_name}} and i am {{age}} old</p>
    <another-child v-bind="$props"></another-child> <!-- another child here and we pass all props -->
  </div>
</template>

<script>
  import AnotherChild from "../another-child/another-child";
  export default {
    components: {AnotherChild},
    props: [],   // I know if I mentioned props here I can receive but it's unknown, I 
                 //just want to pass it down until it received in right component to use  
    created() {
       console.log("Props", this.$props); 
       // Gets null
       // Expected : anyPropsToPass Object
    }
  }
</script>

如果在子元素的 prop 中提到了 prop ,那么它就起作用了,但是应该有一些方法来知道哪些是从父元素传递或绑定的 prop ,即使我们对子元素不感兴趣。
例如:工作正常!
子组件

<template>
  <div>
    <p>I am {{name}} {{last_name}} and i am {{age}} old</p>
    <another-child v-bind="$props"></another-child>
  </div>
</template>

<script>
  import AnotherChild from "../another-child/another-child";
  export default {
    components: {AnotherChild},
    props: ['name', 'last_name'],    
    created() {
       console.log("Props", this.$props); 
       // Gets expected props here
    }
  }
</script>
7vhp5slm

7vhp5slm1#

您可以使用this.$attrs获取所有v绑定属性,包括未声明的属性。

<!-- parent  -->
<template>
  <div id="app">
    <ChildComp :prop1="114" prop2="514" class="homo" />
  </div>
</template>
<script>
// child component
export default {
  created() {
    console.log('all props: ', this.$attrs) // { "prop1": 114, "prop2": "514" }
  }
}
</script>
vlf7wbxs

vlf7wbxs2#

使用this.$attrs应该可以做到这一点
Child.vue:

<template>
  <div>
    <p>I am {{getValue('name')}} {{getValue('last_name')}} and i am {{getValue('age')}} old</p>
  </div>
</template>

<script>
export default {
  methods:{
    getValue(propertyName){
      return this.$attrs[propertyName];
    }
  },
  components: {},
  props: [],
  created() {
    console.log("Props", this.$attrs);
  }
}
</script>
5f0d552i

5f0d552i3#

向下钻取属性是一个不好的模式,它可能会导致不一致,尝试使用provide/inject模式将数据从祖父组件传递到孙组件:

<template>
  <div id="parentComponent">
    <child-component></child-component>
  </div>
</template>

<script>
  import ChildComponent from './components/child-component/child-component'

  export default {
    name: 'app',
    components: {
      ChildComponent
    },
  provide () {
     return {
       user: this.user
     }
   },
    data () {
      return {
        user: {
          name: 'John',
          last_name: 'Doe',
          age: '29',
        }
      }
    }
  }
</script>

在孙组件中:

<template>
  <div>
    <p>I am {{user.name}} {{user.last_name}} and i am {{user.age}} old</p>
    <another-child></another-child>
  </div>
</template>

<script>
  import AnotherChild from "../another-child/another-child";
  export default {
    components: {AnotherChild},
    inject:['user'],
    created() {
       console.log("injected user", this.user); 
       
    }
  }
</script

相关问题