vue_通信组件

组件通信

父子通信

父子通信的核心属性是props，给子组件配置加props 给子组件标签加属性

父组件

在父组件中找到子组件标签，给子组件标签上添加想要传递数据 <组件名 自定义的props名字="要传递的数据">

const parent = {
  template: `
    <div>
      {{msg}}
      <child :msg="msg"></child>
    </div>
  `,
  data () {
    return {
      // 父组件的template中才能使用父组件中的数据
      msg: '测试'
    }
  }
}

子组件

在子组件配置中添加props属性，在属性中写上prop名字，然后使用prop

const child = {
  template: `
    <div>
      {{msg}}
    </div>
  `,
  props: ['msg']
}

子父通信

如果我们想要把数据从子组件中传递到父组件里，可以使用子父通信

父组件

/* 
  先找到模板中的子组件标签，添加@自定义事件名="函数"。
    <组件标签 @自定义事件名="函数"> </组件标签>
  再添加methods属性，属性中添加
  methods: {
    函数名 (data) { 
      data就是子组件中传递的值 
    }
  }
 */

const parent = {
  template: `
    <div>
      <child @自定义事件名="函数"></child>
    </div>
  `,
  methods: {
    函数 (data) {
      // data就是子组件传递过来的数据
    }
  }
}

子组件

/* 
  找到特定的地方（点击事件等函数中），触发自定义事件。
  this.$emit('自定义事件名', 数据)

 */
const child = {
  template: `
    <div>
      <button @click="clickHandler">按钮</button>  
    </div>
  `,
  methods: {
    clickHandler () {
      this.$emit('自定义事件名', '要传递的数据')
    }
  }
}

非父子通信

非父子通信用于数据在非父子组件之间进行传递

非父子通信需要一个公共的vue实例，我们称其为bus,也有称EventHub

bus

const bus = new Vue()

组件1

// 在发送数据的组件中，根据对应的操作（原生事件），我们可以去触发对应的自定义事件
const com1 = {
  template: `
    <div>
      <button @click="sendMsg"></button>
    </div>
  `,
  methods: {
    sendMsg () {
      bus.$emit('自定义事件名', '要传递的数据')
    }
  }
}

组件2

// 一般情况下，我们需要接收数据的组件在创建完成后就完成监听操作，所以一般在created中进行监听操作
const com2 = {
  created () {
    bus.$on('自定义事件名', (res) => {
      // 这个res就是触发自定义事件时传递过来的数据，一般我们会将传递过来的数据设置到data的相关属性上
    })
  } 
}