v-bind 개체를 사용하여 하위 구성 요소에서 소품을 가져오는 방법

v-bind 개체를 사용하여 하위 구성 요소에서 소품을 가져오는 방법

개체의 모든 속성을 다음과 같이 전달합니다.props, 및 사용v-bind의론 없이

하지만 어떻게 하면props소품을 신고할 필요 없이 아이에 대한 정보를 얻을 수 있을까요?

예를 들어, 아래 코드에는 객체가 있습니다.

상위 구성 요소:

<div v-for="item in domArr" :key="item.id">
  <cus-dom v-bind="item"></cus-dom>
</div>

하위 구성 요소:

<script>
  export default {
    name: 'cusDom',
    props: [],   // HOW TO GET THE props, because I have it empty/no arguments HERE?
    data() {
      return {};
    },
    mounted() {
    }
  }
</script>

사용시에도v-bind단, 다음과 같이 선언해야 합니다.props.

네가 안 그러면 걔네들 다 죽을 거야$attrs.

아래의 데모를 참조해 주십시오.명료하게 해 주세요.

Vue.component('child', {
  props: ['a'],
  template: `<button @click="go">PROPS AND ATTRS</button>`,
  mounted() {
    this.go()
  },
  methods: {
    go() {
      console.log(
      '$attrs:', JSON.stringify(this.$attrs), '- $props:', JSON.stringify(this.$props),
      '- a:', this.a, '- b:', this.b)
    }
  }
});
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    stuff: {a: 1, b: 2}
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <child v-bind="stuff"></child>
</div>

언급URL : https://stackoverflow.com/questions/49345098/how-to-get-props-in-child-component-using-v-bind-object