使用 .vue webpack(vue2) 将子组件的数据组件更新为 vue.js 中的父组件 [英] Update a child's data component to the father component in vue.js using .vue webpack(vue2)
问题描述
我正在测试vue.js的组件，遇到子组件变化时更新父组件的问题.
我已经使用 vue-cli (webpack) 生成了项目，并且我正在使用具有自己的 .vue 文件的组件.
代码:
App.vue
<div id="应用程序"><h2>{{title}}</h2><div class="pie"><change-title :title="title"></change-title></模板><脚本>从 './components/ChangeTitle' 导入 ChangeTitle导出默认{成分: {更改标题},数据 () {返回 {title: '标题'}}}
ChangeTitle.vue
<div><input v-model="title"></模板><脚本>导出默认{道具:['标题']}
问题当应用程序加载正确显示标题属性时，但当我在 <change-title> 组件字段中键入直接在 App.vue 文件中的标题属性时未更新.
它还向我显示以下消息:
<块引用>[Vue 警告]:避免直接改变 prop，因为它的值将是每当父组件重新渲染时被覆盖.相反，使用一个基于道具值的数据或计算属性.道具变异:标题"
子组件与其父组件的连接方式是什么?
谢谢..
首先，您需要制作一个 prop 的副本并放入数据中，然后使用 v- 绑定到该数据模型 因为Vue 不希望你直接从组件内部更改prop，所以，在created 钩子内只需复制prop 到数据中的属性:
出口默认{道具:['标题']，创建(){this.val = this.title},数据() {返回 {价值:''}}}然后使用v-model绑定到它:
您下一步是在值更改时将数据发送回父级，您可以在 watcher 中执行此操作，只需在 中观看 组件和 val更改标题$emit 它:
观看:{瓦尔(){this.$emit('title-updated', this.val);}}然后你可以像这样在你的父母中监听那个事件:
最后添加 updateTitle 方法来更改父级中的 title:
方法:{更新标题(标题){this.title = 标题；}}这里是整个 JSFiddle:https://jsfiddle.net/90ws3sL6/>
I am testing the components of vue.js and I encountered the problem of updating a parent component when the child changes.
I have generated the project with vue-cli (webpack), and I am using components that have their own .vue file.
The code:
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>
The problem
When the application load displays the title attribute correctly, but when I type in the <change-title> component field the title attribute that is directly in the App.vue file is not updated.
Also it shows me the following message:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"
What is the way to connect the child component with its parent component?
Thanks..
Firstly, you need to make a copy of the prop and place in data and then bind to that using v-model because Vue doesn't want you to directly change the prop from inside the component, so, inside the created hook simply copy the prop to an attribute in data:
export default{
props: ['title'],
created() {
this.val = this.title
},
data() {
return {
val: ''
}
}
}
Then bind to it using v-model:
<input v-model="val">
You next step is to send the data back to the parent when the value changes, which you can do inside a watcher, simply watch val inside your change-title component and $emit it:
watch: {
val() {
this.$emit('title-updated', this.val);
}
}
Then you can listen for that event in in your parent like so:
<change-title :title="title" @title-updated="updateTitle">
And finally add the updateTitle method to change the title in your parent:
methods: {
updateTitle(title) {
this.title = title;
}
}
Here's the JSFiddle for the entire thing: https://jsfiddle.net/90ws3sL6/
这篇关于使用 .vue webpack(vue2) 将子组件的数据组件更新为 vue.js 中的父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
