Vue父子組件傳值

 Vue父子組件傳值：有四種方式：props，ref，emit 和模板傳遞通信slot

通過props來傳值：

靜態傳值就是直接通過props來傳遞

動態傳值是通過v-bind來綁定一個要傳遞值的key，然后后面跟要傳遞的內容，不過這個內容是可以改變的

比如：

<input v-model="parentMsg"> 
<child v-bind:message="parentMsg"></child>

傳遞的值會跟着input里面輸入的值改變而改變

組件可以為 props 指定驗證要求。

prop 是一個對象而不是字符串數組時，它包含驗證要求

通過ref來傳值：

在父組件引用的子組件中采用ref=’要傳遞的值的key’

父組件中：

<zizujian ref=”msg”></zizujian>
Data(){
　　Return{
　　　　Message:’子組件’
　　}
}
Mounted(){
　　This.$ref.msg.getMsg(this.message)
}

子組件中：

<p>{{msg}}</p>
Data(){
    Return {
        Msg:””,
    }
},
Mounted(m){
    This.Msg=m
}        

這樣就將父組件中的message中的內容傳遞到子組件中的msg變量中

emit是子組件向父組件的傳值方式

$emit(‘eventName’)    
vm.$emit( eventName’, arg ) //觸發當前實例上的事件

子組件可以使用 $emit 觸發父組件的自定義事件

父組件：

<zizujian @getMessage=”getMsg”></zizujian>
Data(){
    Return{
        Message:””
    }
},
Methods(){
    getMsg(data){
        This.message=data
    }
}        

 

子組件：

Data(){
　　Return{
　　　　message:”hello world”
　　}
},
Mounted(){
　　This.$emit(‘getMessage’,this.message)
}

Slot：

父組件向子組件傳遞模板采用slot：

父組件中：

<child>
　　<p>something</p>
</child>

子組件：

<template>
    <slot></slot>
</template>

如果父組件沒傳遞模板，slot里面有內容的話，就會顯示內容

如果有多個模板要進行傳遞，這需要在slot中通過命名（name）來區分：

父組件中：

<child>
　　<p slot=’header’>something</p>
　　<p slot=’footer’>something</p>
</child>

子組件：

<template>
　　<slot name=’header’></slot>
　　<slot name=footer></slot>
</template>