vue父子，兄弟组件传值

一、父子组件通讯

子组件给父组件传值

1、子组件页面 childA

<template>
  <div class="childA">
    <div>
      这里是子组件childA的页面显示内容
    </div>
    <div @click="clickMe">
      定义一个点击方法叫clickMe
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        childAMsg:'A'
      }
    },
    methods:{
      clickMe(){
        this.$emit('parentFunction',this.childAMsg)
        //用$emit给父组件传递一个parentFunction的事件
        //逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量，或者是自己写的，接口啥的调用的数据等

        //父组件中接收-------    <childA @parentFunction="parentEvent"></childA>
        //父组件中的parentFunction就是childA页面传过来的事件，parentEvent是父组件这个事件的方法
      }
    }
  }
</script>

2、父组件页面 parent

<template>
  <div>
    <childA @parentFunction="parentEvent"></childA>
  </div>
</template>
<script>
  import childA from './childA'
  export default {
    components:{
      childA
    },
    data(){

    },
    methods:{
      //data就是子组件$emit传过来的数据
      parentEvent(data){
        console.log(data)   // A  
      }
    }
  }
</script>

父组件给子组件传值

1、先写一个父组件 parent

<template>
  <div>
    <childB :parent-msg="info"></childB>//parent-msg是自定义要传的参数的命名 //info是data里定义的参数
  </div>
</template>
<script>
  import childB from './childB'
  export default {
    components:{
      childB
    },
    data(){
      info:'我是父组件要传的值'
    },
    methods:{
      
    }
  }
</script>

2、再写一个子组件childB     需要用props去接收父组件传过来的值

<template>
  <div class="childB">
    <div>
      {{parentInfo}}
      <!--/渲染为：我是父组件要传的值/-->
    </div>
  </div>
</template>
<script>
  export default {
    props:['parentMsg'],//前面传过来的名字有 -  ，横杠后面的首个字母要大写
    data(){
      return{
        parentInfo:this.parentMsg  //可以直接用this.parentMsg获取传过来的值

      }
    },
    methods:{

    }
  }
</script>

兄弟组件传值

那就理解成为（子组件A传值------>>父组件------>>子组件B）完成兄弟间的传值

1、首先还是一个子组件A

<template>
  <div class="childA">
    <div>
      这里是子组件childA的页面显示内容
    </div>
    <div @click="clickMe">
      定义一个点击方法叫clickMe
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        childAMsg:'A'
      }
    },
    methods:{
      clickMe(){
        this.$emit('parentFunction',this.childAMsg)
        //用$emit给父组件传递一个parentFunction的事件
        //逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量，或者是自己写的，接口啥的调用的数据等

        //父组件中接收-------    <childA @parentFunction="parentEvent"></childA>
        //父组件中的parentFunction就是childA页面传过来的事件，parentEvent是父组件这个事件的方法
      }
    }
  }
</script>

2、然后还是一个父组件parent

<template>
  <div>
    <childA @parentFunction="parentEvent"></childA>
    <childB :parent-msg="info"></childB>
  </div>
</template>
<script>
  import childA from './childA'
  import childB from './childB'
  export default {
    components:{
      childA,
      childB
    },
    data(){
      return{
        info:"我是父组件传的值"
      }
    },
    methods:{
      //data就是子组件$emit传过来的数据
      parentEvent(data){
        console.log(data)   // A
        if(data == 'A'){
          this.info=data //传childA页面的data
        }
      }
    }
  }
</script>

3、最后就是组件childB    需要用props去接收父组件传过来的值 

用计算属性去改变parentMsg

<template>
  <div class="childB">
    <div>
      <!--/渲染为：我是父组件传的值/-->
      {{parentInfo}}
      <!--点击后渲染为：A-->
    </div>
  </div>
</template>
<script>
  export default {
    props:['parentMsg'],//前面传过来的名字有 -  ，横杠后面的首个字母要大写
    data(){
      return{
      }
    },
    computed:{
      parentInfo(){
        console.log(this.parentMsg)   //一开始是 '我是父组件传的值'
        return this.parentMsg         //点击后变为 ‘A’
      }
    },
    methods:{

    },
    created(){
      console.log(this.parentMsg) //'我是父组件传的值'
    }
  }
</script>