Vue中父子组件传值的多种方式

普通方式实现父子组件传值

普通方式即为父组件使用自定义属性向子组件传值，通过自定义事件接收事件；子组件通过props接收数据，子组件通过$emit 向父组件传递自定义事件。

实现代码如下：

子组件：

<template>
  <div>
    我是子组件：
    <input type="text" :value="msg" @input="changeValFn" />
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['msg'],
  methods: {
    changeValFn(e) {
      this.$emit('changeMsg', e.target.value)
    },
  },
}
</script>

父组件：

<template>
  <div class="parent">
    <h1>我是父组件：{{ msg }}</h1>
    <child :msg="msg" @changeMsg="changeMsgFn"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'parent',
  components: {
    child,
  },
  data() {
    return {
      msg: 'hello!',
    }
  },
  methods: {
    changeMsgFn(value) {
      this.msg = value
    },
  },
}
</script>

v-model 实现父子组件传值

v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件，但是如果每次使用input框，都需要提供value和input事件比较麻烦，所以使用v-model。

实现代码：

子组件：

<template>
  <div>
    我是子组件：
    <input type="text" :value="value" @input="changeValFn" />
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['value'],
  methods: {
    changeValFn(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

父组件：

<template>
  <div class="parent">
    <h1>我是父组件：{{ msg }}</h1>
    <child v-model="msg"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'parent',
  components: {
    child,
  },
  data() {
    return {
      msg: 'hello!',
    }
  },
}
</script>

vue3.0中父子组件传值

vue3.0中废弃了 .sync ，并把所有使用 .sync 的部分并将其替换为 v-model:

<ChildComponent :title.sync="pageTitle" /> <!-- 替换为 --> <ChildComponent v-model:title="pageTitle" />

实现代码如下：

子组件:

<template>
  <label>我是子组件：</label>
  <input type="text" :value="msg" @input="changeValFn" />
</template>

<script>
export default {
  name: 'child',
  props: ['msg'],
  methods: {
    changeValFn(e) {
      this.$emit('update:msg', e.target.value)
    },
  },
}
</script>

父组件：

<template>
  <h1>我是父组件：{{ msg }}</h1>
  <child v-model:msg="msg"></child>
</template>

<script>
import child from './components/child'
export default {
  name: 'App',
  components: {
    child,
  },
  data() {
    return {
      msg: 'hello!',
    }
  },
}
</script>

注意：

子组件中对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue