vue 元件通信傳值 父傳子 子傳父

我們知道vue的特點就是元件化開發,說到元件化開發 必定少不了的就是元件之間的通信傳值了,說到元件之間的通信你有知道多少呢?

1. 父傳子
2. 子傳父

一.父傳子

現在有兩個元件

== parent.vue ==

== child.vue ==

** parent.vue中 **

<template>
    <div class="app">
      <!-- // 父元件   -->
      <!-- //注意這裡是 v-model 達到動态傳值的效果 -->
      <child :func="getParentMsg"/>
    </div>  
</template>
<script>
import child from './child.vue'
export default {
    name: Parent,
    components: {
        child 
    }
     data() {
        return { 
        	getParentMsg:"我是父元件的值"
        }
     }    
}         
           

** child.vue中 **

<template>
    <div class="app">
      <!-- // 子元件   -->
      <p>{{ getParentMsg }}</p>
    </div>  
</template>
<script>
export default {
     name: Child,
     // 這裡用prop接收就行了,然後直接可以在上面用
     prop:['getParentMsg'] 
     data() {
        return { 
        }
     }    
}         
           

小結:

(1) 子元件在props中建立一個屬性，用以接收父元件傳過來的值

(2) 父元件中注冊子元件

(3) 在子元件标簽中添加子元件props中建立的屬性

(4) 把需要傳給子元件的值賦給該屬性

二.子傳父

** child.vue中 **

<template>
    <div class="app">
      <!-- // 子元件   -->
      <p @click="sendParent"></p>
    </div>  
</template>
<script>
export default {
     name: Child,
     data() {
        return { 
            // 在這裡定義要傳給父元件的值
        	childMsg:"我是子元件的值"
        }
     }
     methods:{
     	sendParent(){
     	    // func 這個是父元件指定的傳資料的函數,this.childMsg 這個是要傳給父元件的值
     		this.$emit("func", this.childMsg)
     	}
     }    
}         
           

** parent.vue中 **

<template>
    <div class="app">
      <!-- // 父元件   -->
      <!-- //注意這裡是 v-on -->
      <child @func="getParentMsg"/>
    </div>  
</template>
<script>
import child from './child.vue'
export default {
    name: Parent,
    components: {
        child 
    }
     data() {
        return { 
        }
     } 
     methods:{
        // 傳參接收 子元件的值
     	getParentMsg(val){
     	    // 此時的val 就是子元件傳過來的值
     		console.log(val,"val")
        }
     }   
}         
           

小結:

(1) 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件

(2) 将需要傳的值作為$emit的第二個參數，該值将作為實參傳給響應自定義事件的方法

(3) 在父元件中注冊子元件并在子元件标簽上綁定對自定義事件的監聽

(4) 在通信中，無論是子元件向父元件傳值還是父元件向子元件傳值，他們都有一個共同點就是有中間媒體，子向父的媒體是自定義事件，父向子的媒體是props中的屬性。抓準這兩點對于父子通信就好了解了

敬請期待: 下篇将會更新 vue項目做一鍵複制頁面内容到粘貼闆功能