您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

vuejs从子组件更新父数据

vuejs从子组件更新父数据

Vue 2.0中不赞成使用双向绑定,而是使用事件驱动的体系结构。通常,孩子不应该改变其道具。而是应该$emit发生事件,并让父级对这些事件做出响应。

在您的特定情况下,可以将@R_301_2410@组件与一起使用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

其他 2022/1/1 18:17:39 有744人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶