父向子傳參

直接說(shuō)方法,自己去查怎么引入子組件

<!--父組件   HelloWorld.vue-->
<template>
    <son :abc="res"></son>  <!--res為父組件data內(nèi)的數(shù)據(jù)-->
</template>

<!--子組件   son.vue-->
<template>
  <div>{{ abc }}</div>
</template>
<script>
export default {
  props:['abc']
}
</script>

子向父?jìng)鲄? 子組件調(diào)用父組件方法

$emit('事件名', 傳遞的參數(shù))

<!--子組件   son.vue-->
<template>
  <div @click="btn">向父組件傳參</div>
</template>
//事件
methods: {
    btn() {
      this.$emit('event', this.aaa)  
    }
  }

<!--父組件   HelloWorld.vue-->
<template>
   <son @event="change"></son>  <!--res為父組件data內(nèi)的數(shù)據(jù)-->
</template>

 methods:{
    change(r){
      this.res =r
    }
  }

父組件調(diào)用子組件方法

emit('事件名', 傳遞的參數(shù))

<!--子組件   son.vue-->
<!--子組件定義事件-->
methods: {
   btn() {
      console.log('父組件調(diào)用該方法成功')
    }
  }

<!--父組件   HelloWorld.vue-->
<!--通過(guò)ref綁定-->
 <div @click="btn">父組件</div>
<son ref="abc"></son>

methods:{
    btn(){
     this.$refs.abc.btn()  //調(diào)用ref綁定組件的btn事件
    }
  }

子組件調(diào)用父組件事件

<!--父組件   HelloWorld.vue-->
 methods:{
    fatherMethod() {
      console.log('測(cè)試');
    }
  }

<!--子組件   son.vue-->
 methods: {
    btn() {
      this.$parent.fatherMethod();
    }
  }

不相干組件傳值(有機(jī)會(huì)整理下)
參考: http://www.itdecent.cn/p/b78c8e9a7dda