使用.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）

回答

相关问题