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