问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue 子组件如何更新父组件参数值？

头像
Mark
    212
    头像
    linong
      29.2k1367136
      新手上路，请多包涵

      下面这个例子，父组件输入新内容，子组件会同步更新，但是子组件输入内容父组件不变，怎么实现双向互动？

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
      父组件输入：<input v-model="parentMsg">
      <br>
      子组件输入：<child v-bind:message="parentMsg"></child>
    </div>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<input v-model="message">'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件输入值'
  }
})
</script>
</body>
</html>
      vue.js
      阅读 3.7k
      2 个回答
      得票最新
      头像
      linong
        29.2k1367136

        数据双向绑定，单向数据流。

        可以看到你给子组件写的 v-bind:message="parentMsg"。

        本身这里就只是传入，所以你可以 v-model 或者 sync 或者其他的方式，改成双向的。

        然后呢，再看你子组件怎么写的 props: ['message'],template: '<input v-model="message">'。 Vue 是允许你这样去修改内容的，你需要通过 emit 通知父组件。

        还有一种方式就是对象，引用方式，js里面基本类型（数值，字符串）都是传值。对象和数组才是传引用。

        那好了总结一下解决放哪。

        1. 父子组件通信 emit

          1. v-model
          2. sync
        2. 传对象，使用引用的方式来联动。
        头像
        前端精
          536126

          从 vue 单向数据流概念，可以看出子组件的这种写法是错误的，

          ❌ template: '<input v-model="message">'

          v-model 是一个语法糖，用普通的写法：

          <input :value="xxx" @input="xxx = $event.target.value" />

          所以，这是直接修改了 prop 的值。这个行为是不被允许的，是会报错的。

          如何修改？（Vue2）：

          父组件采用 v-model 语法糖进行传递 prop

          //...
子组件输入：<child v-model="parentMsg"></child>
//...

          子组件内部写法。
          因为父组件采用 v-model 语法糖的原因，子组件默认会接收一个命名为 value 的 prop，父组件也会监听一个 input 事件。那么子组件就可以 emit 一个 input 事件，上传至父组件，交给父组件更改，不违背单向数据流

          props: ['value'],
<input :value="value" @input="$emit('input', $event.target.value)" />

          题外话，在 vue2 v2.2 版本有一个新的选项，model，可以修改 v-model 把 value 用作 prop 且把 input 用作 event。

          如何修改？（Vue3）：

          vue3 最大的改变就是 v-model，可以说是结合了 vue2 的 v-model 和 :sync 两个语法糖，更灵活

          //...
子组件输入：<child v-model="parentMsg"></child>
//...

// or

//...
子组件输入：<child v-model:msg="parentMsg"></child>
//...

          子组件内部写法。

          props: ['modelValue'],
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

// or

props: ['msg'],
<input :value="msg" @input="$emit('update:msg', $event.target.value)" />
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题