栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

vuejs从子组件更新父数据

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vuejs从子组件更新父数据

Vue
2.0中不赞成使用双向绑定,而是使用事件驱动的体系结构。通常,孩子不应该改变其道具。而是应该

$emit
发生事件,并让父级对这些事件做出响应。

在您的特定情况下,可以将自定义组件与一起使用

v-model
。这是一种特殊的语法,允许进行接近双向的绑定,但实际上是上述事件驱动架构的简写形式。

这是一个简单的示例:

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>

这就是为什么需要将子项上的prop命名为value的原因,以及子项需要$ emit一个名为的事件的原因

input



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/635050.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号