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

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

在您的模态声明中添加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" 。

在您的Child 组件中，添加一个v-if ，因为user并不总是有name （它可以是null ，就像父级初始化时一样 - 请参阅父级的data() { ..., user: null } ） ：

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

如果你不添加这个v-if ，你会在页面加载时得到一个异常（同样，因为user被初始化为null并且null没有name属性）。

Answer 2

你应该简单地试试这个：

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

阅读有关反应性和如何跟踪更改的更多信息。