我开始玩vuejs(2.0)。 我构建了一个包含一个组件的简单页面。 该页面有一个带有数据的Vue实例。 在那个页面上，我注册并将组件添加到html中。 组件有一个输入[type=text]。我希望该值反映在父实例(主Vue实例)上。
如何正确地更新组件的父数据? 从父对象传递绑定道具是不好的，会向控制台抛出一些警告。他们的文件里有一些东西，但不管用。
当前回答
介绍
我正在寻找在vue3中从父母发送数据给孩子(并返回)(我知道这个问题是关于ve2的，但当时在SO上没有关于vue3的参考)。
下面是工作的样板结果，纯粹的“html + js”，没有打包器，模块，等等，我解释说。
注:
插入子线 <component-a:foo="bar" @newfooevent="bar = $event"></component-a> '
我绑定父母。酒吧给孩子。Foo使用速记:Foo ="bar"，与v-bind: Foo ="bar"相同。它通过道具将数据从父节点传递给子节点。 警告:事件监听器应该只放在子组件标签中! 这就是@newfooevent="bar = $event"部分。 你不能在<div id="app">或父类中的任何地方捕获信号。 不过，这是父进程的部分，在这里您可以访问所有父进程的数据，并从子进程的信号中提取数据来处理它。
You can create app, and define component after it (the app.component("component-a", ...) part. Caveat: there are no need in forward declaration of components, e.g. functions in C/C++. You can create app which uses the component, and define the component afterwards. I lost a lot of time looking for the way to declare it somehow - no need. Here you can find a nice example of the v-model usage, and the code I used to sort things out: https://javascript.plainenglish.io/vue-3-custom-events-d2f310fe34c9
这个例子
<!DOCTYPE html> <html lang="en"> <head> <title>App</title> <meta charset="utf-8" /> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <component-a :foo="bar" @newfooevent="bar = $event"></component-a> <p>Parent copy of `bar`: {{ bar }}</p> <button @click="bar=''">Clear</button> </div> <script> const app = Vue.createApp({ data() { return { bar: "bar start value" }; } }); app.component("component-a", { props: { foo: String }, template: ` <input type="text" :value="foo" @input="$emit('newfooevent', $event.target.value)"> ` }); app.mount("#app"); </script> </body> </html>
其他回答
双向绑定在Vue 2.0中已弃用，转而使用事件驱动的体系结构。一般来说，孩子不应该改变它的道具。相反，它应该$emit事件并让父进程响应这些事件。
在您的特定情况下，您可以使用带有v-model的自定义组件。这是一种特殊的语法，它允许一些接近双向绑定的东西，但实际上是上面描述的事件驱动体系结构的简写。你可以在这里阅读-> https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events。
这里有一个简单的例子:
Vue.component('child', { template: '#child', //The child has a prop named 'value'. v-model will automatically bind to this prop props: ['value'], methods: { updateValue: function (value) { this.$emit('input', value); } } }); new Vue({ el: '#app', data: { parentValue: 'hello' } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <p>Parent value: {{parentValue}}</p> <child v-model="parentValue"></child> </div> <template id="child"> <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)"> </template>
文档中说
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
等于
<custom-input v-model="something"></custom-input>
这就是为什么子对象上的道具需要命名为value，以及为什么子对象需要$emit一个名为input的事件。
从文档中可以看到:
在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
}
}
})
在父组件中——>
数据:function(){ 返回{ siteEntered: false， }; }，
在子组件中——>
这个。父母。美元数据。siteEntered = true;
在孩子身上
<input
type="number"
class="form-control"
id="phoneNumber"
placeholder
v-model="contact_number"
v-on:input="(event) => this.$emit('phoneNumber', event.target.value)"
/>
data(){
return {
contact_number : this.contact_number_props
}
},
props : ['contact_number_props']
在父
<contact-component v-on:phoneNumber="eventPhoneNumber" :contact_number_props="contact_number"></contact-component>
methods : {
eventPhoneNumber (value) {
this.contact_number = value
}
也可以将道具作为对象或数组传递。在这种情况下，数据将是双向绑定的:
(这一点在主题的最后注明:https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow)
Vue.component('child', { template: '#child', props: {post: Object}, methods: { updateValue: function () { this.$emit('changed'); } } }); new Vue({ el: '#app', data: { post: {msg: 'hello'}, changed: false }, methods: { saveChanges() { this.changed = true; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <p>Parent value: {{post.msg}}</p> <p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p> <child :post="post" v-on:changed="saveChanges"></child> </div> <template id="child"> <input type="text" v-model="post.msg" v-on:input="updateValue()"> </template>
推荐文章
- Vue' export default' vs 'new Vue'
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
