关于vue组件的调用以及传值

参考文档

1. https://cn.vuejs.org/v2/api/#vm-props

2. https://cn.vuejs.org/v2/api/#vm-refs

3. https://cn.vuejs.org/v2/api/#vm-on

4. https://cn.vuejs.org/v2/api/#vm-emit

5. https://blog.csdn.net/chaochao466/article/details/82884966

6. https://www.jb51.net/article/139991.htm

 

个人浅解：

• 父组件可以使用:key把数据绑定传给子组件,子组件使用props 接收。
• 子组件可以使用 $emit 触发父组件的自定义事件。
• vm.$emit( event, arg ) 可用于触发父组件内 使用 v-on( event, fn ) 监听的event 事件，并且将获取的参数 arg 传入对应的方法内fn；即子组件向父组件传值
• vm.$emit( event, arg ) //触发当前实例上的事件    vm.$on( event, fn ); //监听event事件后运行 fn方法
• $emit和$on的事件在同一个公共的实例上可使用 vm.$emit( event, arg )向vm.$on( event, fn ) 传递事件；即用 $on(eventName) 监听事件，使用 $emit(eventName) 触发事件，一旦 $emit 事件一触发，$on 则监听到 $emit 所派发的事件，派发出的命令和执行派执命令所要做的事都应是对应的

例：
//父组件parents.vue
<template>
    <child-a ref="childa" @clik="changeA"  :values="IT'S A">{{MessageA}}</child-b>
    <child-b ref="childb" @changeB="log">{{MessageB}}</child-b>
    <h1 @click="test">test</h1>
</template>
<script>
import childa from './Childa'
import childb from './Childb'

export  default{
    name: 'Parents',
    data(){
        return{
            MessageA:"AAA",
            MessageB:"BBB",
        }
    },
    components:{
        childa ,
        childb 
    },
    methods:{
        test(){
             this.$emit('css','123131');
             this.$on('css',(data)=>{this.log(data)});
             //此处必须使用箭头函数 ()=>{}，否则接收不到参数
             //this.$on('css',(data)=>{console.log(data)});
        },
        log(data){
           console.log(data) 
        },
        changeA(){
            //父组件调用子组件的方法，childa是上边ref起的名字，testA是子组件的方法
            this.$refs.childa.testA();
        }
    }
}
</script>

//子组件childa.vue
<template>
    <h1 @click="send">{{values}}</h1>
</template>
<script>
export default{
    name: 'Childa',
     props:{ //父组件传值 可以是一个数组，对象
        values:{
          type:String,//类型为字符窜
          default:"123" //可以设置默认值
        }
  },
  methods:{
        testA(dataA){
           console.log("testA:"+dataA) 
        },
        send(){
            //向兄弟组件b传值
            this.$emit("Aevent","A send to B")
        }
    }
}
</script>

//子组件childb.vue
<template>
    <h1 @click="testB">{{values}}</h1>
</template>
<script>
export default{
    name: 'Childb',
    data(){
        return{
            values:"BBB",
        }
    },
  },
  mounted(){
  //监听事件Aevent，回调函数使用箭头函数;
    this.$on("Aevent",(val)=>{
      console.log("Aevent:"+val);
    })
  }
  methods:{
        testB(dataB){
           console.log("testB:"+dataB);
           //父组件已监听changeB，子组件触发后父组件调用对应方法
           this.$emit("changeB",dataB);
        }
    }
}
</script>