我开始玩vuejs(2.0)。 我构建了一个包含一个组件的简单页面。 该页面有一个带有数据的Vue实例。 在那个页面上，我注册并将组件添加到html中。 组件有一个输入[type=text]。我希望该值反映在父实例(主Vue实例)上。
如何正确地更新组件的父数据? 从父对象传递绑定道具是不好的，会向控制台抛出一些警告。他们的文件里有一些东西，但不管用。
当前回答
双向绑定在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的事件。
其他回答
介绍
我正在寻找在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>
也可以将道具作为对象或数组传递。在这种情况下，数据将是双向绑定的:
(这一点在主题的最后注明: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>
我认为这个可以达到目的:
@change=“$emit（变量）”
当我们想要将数据传递给父组件以及当前子组件的另一个嵌套子组件时，使用data属性将非常有用，如下面的示例所示。
例子: 像这样从父组件调用子组件。
父组件:
<template>
<TodoItem :todoParent="todo" />
</template>
<script>
export default {
data() {
return {
todo: {
id:1,
task:'todo 1',
completed:false
}
};
}
}
</script>
子组件:
<template>
<div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
<p>
<input type="checkbox" @change="markCompleted" />
{{todo.task}}
<button class="del">x</button>
</p>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todoParent"],
data() {
return {
todo: this.todoParent,
};
},
methods: {
markCompleted() {
this.todo.completed = true
},
},
};
</script>
即使你可以将这个属性传递给嵌套的子组件，它也不会给出这个错误/警告。
当您只需要在父组件和子组件之间同步此属性时的其他用例。可以使用Vue中的同步修改器来实现。v型模型也很有用。在这个问题中还有许多其他的例子。
Example2:使用组件事件。 我们可以从子组件发出事件，如下所示。
父组件:
<template>
<TodoItem :todo="todo" @markCompletedParent="markCompleted" />
</template>
<script>
export default {
data() {
return {
todo: {
id:1,
task:'todo 1',
completed:false
}
};
},
methods: {
markCompleted() {
this.todo.completed = true
},
}
}
</script>
子组件:
<template>
<div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
<p>
<input type="checkbox" @change="markCompleted" />
{{todo.task}}
<button class="del">x</button>
</p>
</div>
</template>
<script>
export default {
name: "TodoItem",
props: ["todo"],
methods: {
markCompleted() {
this.$emit('markCompletedParent', true)
},
}
};
</script>
在孩子身上
<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
}
推荐文章
- 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有不聚焦的方法吗?
