VUE components 组件用法

子组件给父组件传递数据

子组件中：
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')
        },

https://www.jianshu.com/p/6dfb2d2cbc71

https://www.jianshu.com/p/816971e4269b