<template>
  <div>
    <h2>son组件</h2>
    <p>props:{{ text }}</p>
  </div>
</template>

<script>
export default {
  // 在此处定义props
  props: {
    // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
    text: {
      type: String,    // type 是用来规定此属性接收到的数据的数据类型
      default: "未传递时默认的文字"    // 这个default是当这个 text 没有接收到传递的数据时的默认值
    }
  }
}
</script>

父组件中:? ? ? ? 标签内传递数据

<template>
  <div id="app">
    <!-- 
      这里的text就是子组件props里定义的text,这两个名字得一致
      并且传递的数据也要符合 type 规定的数据类型
      text就是传递字符串,:text就是传递动态数据
      -->
    <Son text="我是大娃 传给子啦" />
    <Son :text="wenzi" />
  </div>
</template>

<script>
import Son from './components/son.vue';
export default {
  data () {
    return {
      wenzi: '我是二娃 传给子啦'
    }
  },
  components: {
    Son
  }
}
</script>

????????如上虽然我的注释写的很清楚了,但是还是在介绍一下, <Son/> 是子组件的标签,在此标签的基础上书写子组件props 定义的属性名,并且传递参数具体对应关系和效果如下:

? ? ? ? 如上就是第一种我最常用的父传子,其实还有一种方法,但是我一般也不用,很不方便,也贴到下边了,这个是以数组方式声明

export default {
  // 在此处定义props
  props: ['text']
}
</script>

?

2.子传父 $emit

? ? ? ? 刚刚说到了在 Vue2.0 子组件不能直接改父组件的数据,否则会报错,这个解决方法就是在子组件中发起一个自定义事件 ,在父组件监听这个事件,并且定义一个函数来改变数据,具体操作如下:

子组件:? ? ? ? 发起一个自定义事件,等待父组件监听到执行函数

<template>
  <div>
    <h2>son组件</h2>
    <p>props:{{ text }}</p>
    <button @click="changeTextFn">改变文字</button>
  </div>
</template>

<script>
export default {
  // 在此处定义props
  props: {
    // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
    text: {
      type: String,    // type 是用来规定此属性接收到的数据的数据类型
      default: "未传递时默认的文字"    // 这个default是当这个 text 没有接收到传递的数据时的默认值
    }
  },

  methods: {
    // 按钮点击事件
    changeTextFn () {
      // 发起自定义事件,名字叫什么都行,第一个参数是事件名,之后再跟着的都是传递的参数
      this.$emit('changeFn', '我想变成三娃')
    }
  }
}
</script>

????????我先在原有的代码上添加了一个<button>按钮,在点击调用的函数中,通过 $emit 来发起事件并且可以传递参数

格式:????????this.$emit('changeFn',?'我想变成三娃')?

格式:????????this.$emit('自定义事件名',?传递的参数)?

父组件:? ? ? ? 行内监听子组件的自定义事件名(函数上不用写参数,在?methods?中直接写形参就行)

<template>
  <div id="app">
    <Son :text="wenzi" @changeFn="changeFn" />
  </div>
</template>

<script>
import Son from './components/son.vue';
export default {
  data () {
    return {
      wenzi: '我是二娃 传给子啦'
    }
  },

  components: {
    Son
  },

  methods: {
    // 监听子组件自定义事件
    changeFn (newText) {
      // 这里的形参接受到的就是子组件中 第二个参数传递的数值
      this.wenzi = newText
    }
  }
}
</script>

对应关系和效果图如下:

3.跨组件通信 event-bus

????????如果两个组件的关系非常的复杂或者没有未产生直接联系，那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)

? ? ? ? 按照我的习惯,我会将事件总线创建到 main.js 中,这个使用原理是将bus挂载到Vue原型上,这样就可以保证所有的组件都能通过 this.bus 访问到事件总线,从而通过同一个事件总线监听同一个事件,具体原理和父子传参差不多,都是 $emit 传递数据, 只不过接收变成了$on?

????????我这次以送礼物举例用了两个关系不大的组件分别是 男组件 和 女组件 (随便起的名)具体如下图:

发送数据男组件:? ?

??? this.bus.$emit('自定义事件名',传递的参数)?

<template>
  <div>
    <h1>男组件</h1>
    <button @click="sendGiftFn">送礼物</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      gift: '玫瑰花'
    }
  },

  methods: {
    sendGiftFn () {
      // 通过 bus 事件总线发起 自定义事件,并且传递参数(第一个是事件名,第二个开始是参数)
      this.bus.$emit('sendMessage', this.gift)
    }
  }
}
</script>

接收数据女组件:?????????

?this.bus.$on('监听的事件名',(e)=>{ e这个形参所接收的就是监听事件所携带的参数数据?})?

<template>
  <div>
    <h1>女组件</h1>
    <p>来自男组件的礼物:{{ info }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: ""
    }
  },

  created () {
    // e 就是 sendMessage 这个事件所传递的数据
    this.bus.$on("sendMessage", (e) => {
      this.info = e;
    });
  }
}
</script>

<style>
</style>

具体效果如下: