Vue 3.x 父子组件传值

一、父组件给子组件传值

1、父组件调用子组件时，在子组件上加上绑定参数

<template>
  <div>
    <!-- 3、展示组件，:title="msg" 表示向<my-header> 子组件传入参数title ，也可以使用 home="this" 把整个父组件传给子组件><-->
    
    <my-header :title="msg" home="this"></my-header>
  </div>
</template>

<script>
//1、引入组件
import MyHeader from ‘../components/MyHeader‘
export default {
  data() {
    return {
      msg: "主页"
    }
  },
  //2、挂载组件
  components:{
      MyHeader
  }
};
</script>

:title="msg" 表示向 子组件传入参数title

2、子组件使用props接收父组件传过来的参数

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h2>{{title}}</h2>
        <button @click="getTitle">获取父组件传过来的title</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "头部组件"
            }
        },
        //使用props 接收父组件传过来的值,是一个数组，多个参数可以使用逗号分开
        props:["title","home"],
        methods:{
            getTitle(){
                //方法中使用父组件传过来的参数，可以使用 this
                alert(this.title)
                //或者 this.home.title
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

注：props 是一个数组，多个参数可以使用逗号分开，方法中使用父组件传过来的参数，可以使用 this
效果展示如下：

3、props验证

props:{
  btnvalue:{
    type:[Number,String],
    default:10, // 默认值
    required:true  //可以使用required选项来声明这个参数是否必须传入。
    
   // default与required 一般并不同时写
 }

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    fooC: {
        type: String,
        required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
        type: Number,
        default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
        type: Object,
        // 当为对象类型设置默认值时必须使用函数返回
        default: function(){
            return { message: ‘Hello, world‘ }
        }
    },
    // fooF使用一个自定义的验证器
    fooF: {
        validator: function(value){
            return value>=0 && value<=100;
        }
    }

二、子组件给父组件传值

Vue 3.x 父子组件传值

原文：https://www.cnblogs.com/qingheshiguang/p/14617814.html