component 組件的命名和傳值

在components文件創建自己的組件 search.vue

page頁面導入

import search from '../../components/search.vue'

　　注冊以及命名（一下兩種命名方式都可以使用my-search的標簽）

components:{
            // 'my-search':search,
            'MySearch':search
        }

使用

<my-search></my-search>

 

組件之間傳值

【1】父組件給子組件傳值：

父組件：
data: 
{ 
    showFaceDia: false 
}
<v-facePop :showFaceDia=“showFaceDia”></v-facePop>

子組件：
props:{
  showFaceDia: Boolean
}

【2】子組件向父組件傳值 （vue寫法）

子組件中：
this.showFaceDia = false  
this.$emit('showFaceDia',this.showFaceDia)  //執行showFaceDia函數並把要改變的值作為參數帶過去

父組件：
methods:{
showFaceDia(msg){
    this.showFaceDia = msg
  }
}
不要忘記在DOM中引用：
<test :title="title" @showFaceDia="showFaceDia"></test>//注意showFaceDia后不能加括號

 

組件之間調用方法

父組件調用子組件的方法：

//父組件
<v-test :title="title" ref="aa"></v-test> //通過ref為子組件賦予ID引用
<div @click="getChild()"></div>
getChild(){
  this.$refs.aa.childFun()   // 此處使用
}

 

子組件調用父組件的方法：

（1）直接在子組件中通過this.$parent.event來調用父組件的方法
（2）在子組件里用$emit向父組件觸發一個事件，父組件監聽這個事件就行了實例:
子組件：
methods: {
        getParent () {
            this.$emit('togglePop')  //此處直接寫父組件的事件名稱
        }
    }
父組件：
DOM中：<test :title="title" @togglePop="togglePop"></test>
togglePop(){
            console.log('ddddddd')
        },