vue3父子组件传值中props使用细节浅析

下面开始详细讲解“vue3父子组件传值中props使用细节浅析”的完整攻略。

1. 父组件向子组件传值

1.1 父组件使用props向子组件传值

在Vue3中，使用props向子组件传值与Vue2相同。在父组件中定义数据，然后在子组件中通过props接收即可。

// 父组件
<template>
  <child :msg="message"></child>
</template>

<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  components: {
    Child
  }
}
</script>

// 子组件
<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

在上面的代码中，父组件通过:msg="message"向子组件传递数据，子组件通过props接收数据。

1.2 Props验证

在Vue3中，我们可以通过Props验证来对传递的数据进行验证。

// 子组件
<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true,
      validator: function (value) {
        return value.length > 3;
      }
    }
  },
}
</script>

通过在props中定义type,required和validator等属性，我们可以对数据进行验证。在上述代码中，msg必须是字符串类型，并且必须传递，同时校验函数validator返回值必须为真。

2. 子组件向父组件传值

2.1 使用事件向父组件传递数据

在Vue3中，子组件向父组件传值依然采用了事件派发的方式。使用$emit方法来触发事件，父组件在使用子组件时加上事件监听即可。

// 子组件
<template>
  <button @click="add">Add count</button>
</template>

<script>
export default {
  methods: {
    add() {
      this.$emit('addcount', 1);
    }
  }
}
</script>

// 父组件
<template>
  <child @addcount="handleAdd"></child>
</template>

<script>
import Child from './Child.vue';
export default {
  methods: {
    handleAdd(val) {
      console.log(val);
    }
  },
  components: {
    Child
  }
}
</script>

在上述代码中，当子组件按钮被点击后，会触发add方法，并使用$emit方法派发出一个名为addcount的事件，同时将1作为参数传递给父组件。父组件在使用子组件时，通过@addcount监听这个事件，并在handleAdd方法中处理传递过来的数据。

2.2 使用v-model向父组件传递数据

在Vue3中，我们也可以使用v-model来实现子组件向父组件传值。和Vue2中相同，我们可以通过在子组件中使用model选项和$emit方法来指定v-model绑定的数据和事件。

// 子组件
<template>
  <input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: String
  }
}
</script>

// 父组件
<template>
  <child v-model="name"></child>
</template>

<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      name: ''
    }
  },
  components: {
    Child
  }
}
</script>

在上述代码中，子组件中使用model选项指定了v-model绑定的数据是value，事件是update:value。然后在input标签中，我们使用:value="value"来将父组件传入的数据绑定到输入框中，当输入框内容发生改变时，会使用$emit('update:value', $event.target.value)方法将最新的数据传递给父组件。在父组件中，我们在子组件上使用v-model双向绑定，将子组件中的value和父组件中的name进行关联。

至此，“vue3父子组件传值中props使用细节浅析”的攻略完结。希望能帮助到您的开发。