我开始玩vuejs(2.0)。 我构建了一个包含一个组件的简单页面。 该页面有一个带有数据的Vue实例。 在那个页面上，我注册并将组件添加到html中。 组件有一个输入[type=text]。我希望该值反映在父实例(主Vue实例)上。
如何正确地更新组件的父数据? 从父对象传递绑定道具是不好的，会向控制台抛出一些警告。他们的文件里有一些东西，但不管用。
当前回答
更简单的方法是使用这个。$emit
Father.vue
<template>
<div>
<h1>{{ message }}</h1>
<child v-on:listenerChild="listenerChild"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Father",
data() {
return {
message: "Where are you, my Child?"
};
},
components: {
Child
},
methods: {
listenerChild(reply) {
this.message = reply;
}
}
};
</script>
Child.vue
<template>
<div>
<button @click="replyDaddy">Reply Daddy</button>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
replyDaddy() {
this.$emit("listenerChild", "I'm here my Daddy!");
}
}
};
</script>
完整示例:https://codesandbox.io/s/update-parent-property-ufj4b
其他回答
更简单的方法是使用这个。$emit
Father.vue
<template>
<div>
<h1>{{ message }}</h1>
<child v-on:listenerChild="listenerChild"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Father",
data() {
return {
message: "Where are you, my Child?"
};
},
components: {
Child
},
methods: {
listenerChild(reply) {
this.message = reply;
}
}
};
</script>
Child.vue
<template>
<div>
<button @click="replyDaddy">Reply Daddy</button>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
replyDaddy() {
this.$emit("listenerChild", "I'm here my Daddy!");
}
}
};
</script>
完整示例:https://codesandbox.io/s/update-parent-property-ufj4b
在父组件中——>
数据:function(){ 返回{ siteEntered: false， }; }，
在子组件中——>
这个。父母。美元数据。siteEntered = true;
子组件
使用这个。$emit('event_name')向父组件发送一个事件。
父组件
为了在父组件中监听该事件，我们执行v-on:event_name，并在该事件发生时执行一个方法(例如handleChange)
:完成)
从文档中可以看到:
在Vue.js中，父子组件关系可以概括为向下的道具，向上的事件。父进程通过道具向下传递数据给子进程，子进程通过事件向父进程发送消息。接下来让我们看看它们是如何工作的。
如何传递道具
下面是将道具传递给子元素的代码:
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
如何触发事件
HTML:
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
JS:
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
There is another way of communicating data change from child to parent which uses provide-inject method. Parent component "provides" data or method for the child component, and this data or method is then "injected" into child component - but it can also be used for triggering a method in parent and passing it a parameter. This approach can be especially useful when having a child component which happens to be embedded in multiple other components. Also, in a large project care must be taken not to lose overview of provide and inject usage.
父组件App.vue使用provider访问它的方法updateParentValue(如果提供了方法而不是数据，则以方法的形式提供)的例子:
<template>
<h2>App.vue, parentValue is: <em>{{ parentValue }}</em></h2>
<ChildComponent1 />
</template>
<script>
import ChildComponent1 from "./components/ChildComponent1.vue";
export default {
data() {
return {
parentValue: "",
};
},
components: {
ChildComponent1,
},
provide() {
return {
updateParent: this.updateParentValue,
};
},
methods: {
updateParentValue($value) {
this.parentValue = $value;
},
},
};
</script>
在本例中，组件Component4。vue在“底层”，也就是说，App.vue包含了Component1, Component1包含了Component2…直到Component4，它实际上使用inject来访问父方法，然后调用父方法并传递参数$value(这里只是一个随机数):
<template>
<div>
<h2>ChildComponent4.vue</h2>
<button @click="updateParent(Math.random())">
Update parent value in App.vue
</button>
</div>
</template>
<script>
export default {
inject: ["updateParent"],
};
</script>
完整的例子可以在这里找到。 Vue.js文档
