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

【问题标题】：How can i pass data from parent component to a child component in Vue.js?如何在 Vue.js 中将数据从父组件传递到子组件？
【发布时间】：2018-08-15 18:23:22
【问题描述】：

我是 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>

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

谢谢。

【问题讨论】：

在孩子中尝试 {{ $parent.user.name }}。 Vue 不鼓励这种做法，但按照约定的方式你必须声明并传递一个 prop。编写的代码稍微少一些，而且可以工作。
我需要像 this.$parent._data.user.name 这样传递它，但是我可以用 props 来做吗？

标签： javascript vue.js vuejs2 vue-component

【解决方案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"。

并且在您的子组件中，添加一个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属性）。

【讨论】：

【解决方案2】：

你应该试试这个：

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

阅读更多关于Reactivity and How Changes Are Tracked的信息。

【讨论】：