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')
        },