组件通信-基础

组件最常用的还是用.vue文件的方式编写

父子组件

1. 父组件引用子组件

父组件 (parent.vue)

<template>
  <div class="parent">
    <h1>我是父组件</h1>
    <child></child>
  </div>
</template>

<script>
import Child from "./child";
export default {
  components:{
      Child
  },
}
</script>

子组件(child.vue)

<template>
  <div class="child">
    <p>我是子组件</p>
  </div>
</template>

<script>
export default {
  name: 'child',
}
</script>

2. 父组件给子组件传值(props)

父组件(parent.vue)

<template>
  <div class="parent">
    <h1>我是父组件,我的数据msg是{{msg}}</h1>
    <child :child-msg="msg"></child>
  </div>
</template>

<script>
import Child from "./child";
export default {
  data(){
    return{
      msg:"hello"
    }
  },
  components:{
      Child
  },
}
</script>

子组件(child.vue)

<template>
  <div class="child">
    <p>我是子组件,父组件传递给我的值是:{{childMsg}}</p>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['childMsg']
}
</script>

这里是将msg的值传给子组件中childMsg,驼峰式要转换 -

子组件通过props来接收数据:
有三种方式,这里用到了第一种
方式1：

props: ['childMsg']

方式2 :

props: {
    childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

type:
    String
    Number
    Boolean
    Function
    Object
    Array
    Symbol
default:默认值

3. 子组件触发父组件方法($emit）

在父组件中 子组件上绑定事件 @change='parchange'
子组件通过 $emit('change') 触发@change方法
子组件通过$emit('change',val) 触发@change方法,并将val 传给父组件.(可用于修改父组件的值)

父组件(parent.vue)

<template>
  <div class="parent">
    <h1>我是父组件,我的数据msg是{{msg}}</h1>
    <child :child-msg="msg" @update:childMsg="msg = $event"></child>
  </div>
</template>

<script>
import Child from "./child";
export default {
  data(){
    return{
      msg:"hello"
    }
  },
  components:{
      Child
  },
}
</script>

子组件(child.vue)

<template>
  <div class="child">
    <p>我是子组件,父组件传递给我的值是:{{childMsg}}</p>
    <button @click="changeMsg">改变childMsg的值</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: {
    childMsg: {
        type: String,
        default: ''
    }
  },
  methods:{
    changeMsg(){
       this.$emit('update:childMsg', '你好')
    }
  }
}
</script>

如果还有其他操作,可以将update:childMsg变成具体的方法
子组件 this.$emit('updatechildMsg', '你好')
父组件

<child :child-msg="msg" @updatechildMsg="updatechildMsg"></child>

methods:{
   updatechildMsg(val){
     this.msg = valel;
     //其他操作
   }
 }

4.props双向数据绑定(.sync)

父组件中

<child :child-msg.sync="msg"></child>

子组件不变，同上一步update:childMsg

vue2 父子组件间的双向数据绑定 (el-dialog问题)

5. 父组件调用子组件方法和值(ref)

父组件

<child ref='child' ></child>

//调用子组件中的方法
this.$refs.child.say()

子组件

 methods:{
    say(){
        console.log('hello,我是子组件中的方法')
    }
  }

6. 子组件使用父组件的值和方法（$parent）

父组件中的值(name),方法(test)
子组件通过this.$parent.name,this.$parent.test()使用

兄弟组件

子——>父——>子(通过父子两次传递)

vuex（值）

event-bus(方法，值)

新建bus.js，A，B组件引入bus.js。
A向B传值，A使用$emit(event,val)触发事件，B通关$on监听event

bus.js

import Vue from 'vue'
export default new Vue()

父组件

<template>
  <div class="parent">
    <h1>我是父组件</h1>
    <child-a ></child-a>
    <child-b ></child-b>
  </div>
</template>

<script>
import childA from "./childA";
import childB from "./childB";
export default {
  components: {
    childA,
    childB
  },
};
</script>

A

<template>
  <div class="child">
    <p>我是子组件A ，<button @click="sendMsg">问候组件b</button></p>
  </div>
</template>

<script>
import bus from './bus'
export default {
  methods:{
    sendMsg(){
      bus.$emit('send', Math.random())
    }
  },
}
</script>

B

<template>
  <div class="child">
    <p>我是子组件B,msg:{{msg}}</p>
  </div>
</template>

<script>
import  bus  from './bus'
export default {
  data () {
        return {
            msg: '--',
        }
    },
  created () {        
        bus.$on('send', data => {
            this.msg = data
        })
    }
}
</script>