使用.vue webpack（vue2）

將孩子的數據組件更新到vue.js中的父組件我正在測試vue.js的組件，並且我遇到了在孩子更改時更新父組件的問題。使用.vue webpack（vue2）

我已經使用vue-cli（webpack）生成了項目，並且我使用的組件具有自己的.vue文件。

的代碼：

App.vue

<template> 
    <div id="app"> 
    <h2>{{ title }}</h2> 
     <div class="pie"> 
     <change-title :title="title"></change-title> 
    </div> 
    </div> 
</template> 

<script>  
    import ChangeTitle from './components/ChangeTitle' 

    export default { 
    components: { 
     ChangeTitle 
    }, 
    data() { 
     return { 
     title: 'The title' 
     } 
    } 
    } 
</script>

ChangeTitle.vue

<template> 
    <div> 
     <input v-model="title"> 
    </div> 
</template> 

<script> 
export default { 
    props: ['title'] 
} 
</script>

問題當應用負荷顯示標題正確屬性， b當我輸入<change-title>組件字段時，直接在App.vue文件中的標題屬性不會更新。

而且它顯示我以下消息：

[Vue的警告]：避免直接突變道具由於值將是覆蓋每當父組件重新呈現。相反，根據道具的價值使用數據或計算屬性。正在被變異：「標題」

什麼是連接子組件與其父組件的方式？

謝謝..

來源

2017-01-27 chalo

[從子組件vuejs更新父數據（可能的重複http://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child組件） – Saurabh

它不能被視爲重複，因爲你指出的鏈接不使用組件與其自己的文件，並沒有使用.vue擴展 – chalo

但答案將與[this]相同（http://stackoverflow.com/a/40915910/1610034）對於你來說，也請查看這個[答案]（http://stackoverflow.com/a/41663544/1610034） – Saurabh

首先，你需要做的prop的數據副本和地點，然後用v-model因爲Vue不希望你直接改變從組件內的道具綁定到這一點，所以，在created鉤內簡單地在prop複製到一個屬性數據：

export default{ 
    props: ['title'], 
    created() { 
    this.val = this.title 
    }, 
    data() { 
    return { 
     val: '' 
    } 
    } 
}

然後將其綁定使用v-model到：

<input v-model="val">

您下一步是SE第二數據回父值更改時，您可以在watcher裏面做，只是看着val您change-title組件內部和$emit它：

watch: { 
    val() { 
     this.$emit('title-updated', this.val); 
    } 
    }

然後你就可以在你的父母喜歡聽這個事件所以：

<change-title :title="title" @title-updated="updateTitle">

最後加updateTitle方法來改變你的父title：

methods: { 
    updateTitle(title) { 
     this.title = title; 
    } 
    }

這裏的的jsfiddle整個事情：https://jsfiddle.net/90ws3sL6/

來源

2017-01-27 18:58:19

使用.vue webpack（vue2）

回答

相關問題