Question

我是Vue.js的新手，我不知道如何在点击时将数据从父组件传递到子组件。我试过道具，但它没有奏效。所以我有一个模态，我想在点击时打开数据。

按钮

<div class="m-widget14__header_menu">
   <button v-on:click="doSomethingWith" type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>

父脚本

<script>
import ContactModalCreate from './ContactModalCreate.vue'
export default {
  data () {
    return {
      footer: [], 
      user: null
    }
  },
  methods: {
    doSomethingWith(user) {
        this.user = {name: 'Mario'}
        console.log('user', this.user)
    }
  },
  components: {
    'contact-modal-create': ContactModalCreate
  }
}
</script>

子组件，现在我只想在标题中设置名称。

<h5 class="modal-title" id="createContactModalLabel">{{ user.name }}</h5>

<script>
export default {
  props: ['user'],
  data () {
    return {
    }
  },
}
</script>

所以我在父组件中导入子组件，然后调用子组件对吗？那么有人可以帮我吗？

感谢。

Answer 1

你应该试试这个：

data () {
    return {
        footer: [], 
        user: { name: '' }
    }
},

详细了解Reactivity and How Changes Are Tracked。

Answer 2

在模态声明中添加prop。

父模板中的某处：

<div class="m-widget14__header_menu">
   <button v-on:click="doSomethingWith" type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>

<contact-modal-create :user="user"></contact-modal-create>

请注意上面添加了:user="user"。

在子组件中添加v-if，因为user并不总是name（可以是{{1} ，就像父母初始化时一样 - 见父母null）：

data() { ..., user: null }

如果您不添加此<h5 class="modal-title" id="createContactModalLabel"> <span v-if="user">{{ user.name }}</span> </h5>，则在页面加载时会收到异常（同样，因为v-if被初始化为user和{{ 1}}没有null属性。）

如何将数据从父组件传递到Vue.js中的子组件？

2 个答案: