Vue 3.x 父子组件传值 props ref

一、父组件给子组件传值

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 ，注意这个参数不能使用驼峰，不然数据取不到,因为html标签属性不支持驼峰。多个单词组成的可以使用横杠连接： mytitle 或者 my-title，如果使用横杠命名的，子组件prop中接收时不能使用横杠，要使用驼峰命名

<my-header :my-title="msg" home="this"></my-header>正确
<my-header :myTitle="msg" home="this"></my-header>错误
prop:[myTitle]正确，
prop[my-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;
        }
    }

4、单向数据流

父组件的props 参数值发生变化后，子组件的值会相应变化，但是直接改变子组件的值，父组件不会跟着变化

二、子组件给父组件传值

方法一：使用 ref

ref放在标签上，拿到的是原生dom节点
ref放在组件上，拿到的是组件对象

1、调用子组件的时候定义一个 ref

<v-header ref="header"></ v-header>

2、父组件主动获取子组件的数据，使用 $refs

this.$refs.header.属性
this.$refs.header.方法

3、子组件主动获取父组件的数据

this.$parent.数据
this.$parent.方法

以上这种方法可以改变父组件的数据 this.$parent.name="张晓菲",父组件的name就变成 张晓菲 了

方法二：使用$emit