如何在 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: '' }
    }
},

閱讀有關反應性和如何跟蹤更改的更多信息。