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

  • Z时代
  • 2024-02-13
  • 分类：IT

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

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

<!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>

回答：

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

可以看到你给子组件写的 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. 传对象，使用引用的方式来联动。

回答：

从 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)" />

以上是 Vue 子组件如何更新父组件参数值？ 的全部内容， 来源链接： utcz.com/p/936085.html

回到顶部