日报_19Push yourself. Don't settle. 今天主要学习了vue的组件通讯，vue的组件通讯大致

2020年5月22日星期五

Push yourself. Don't settle.

今天主要学习了vue的组件通讯，vue的组件通讯大致有三种父传子，子传父，还有兄弟之间通讯（还有昨天说的'Vuex'）。

第一种：父传子：主要通过props来实现的

实现的步骤：1.父组件通过import引入子组件，并注册--->2.在子组件标签上添加要传递的属性，子组件通过props接收。

接收参数的方式呢有两种：{} [] ,没错就是对象和数组的方式进行接收；

一般呢我们使用 {} 来接收
例如：
  props: {
    title: {
      type: String,  //检查接收的数据类型
      default: '请输入标题', //设置如果没有传递数据时的默认值
      required:true  //必填项，不传递会报错提醒
    }
  }
  
  
  
 父组件：
    <header-com :title.sync="title" />

子组件：
    this.$emit('update:title', '1906A')

  官方建议：不要直接将props接收的值直接渲染到页面，可以通过将接收的值传递给data或computed处理后再展现到页面上
例如：
props: {
    title: {
      type: String,
      default: '请输入标题',
      required: true
    }
},
data () {
    return {
      t: this.title    
    }
  },
  computed: {
     biaoti() {
         return `处理过的标题${this.title}`
     }
  }

注意：不能直接修改props接收过来的值！！！！！！！！！！！！！！！！！！！！！！

第二种：子传父：主要通过$emit来实现

子组件通过通过绑定事件触发函数，在其中设置this.emit(‘要派发的自定义事件’，要传递的值)，emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

this.$emit('confirm', { name: this.name, price: this.price })

$parent:子组件直接父组件

$children：父组件直接调用子组件

ref：通过ref给dom元素或组件本身添加名称来实现

第三种：兄弟之间传值有两种方法：

创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别
引入刚才创建的bus，在组件A中通过bus.emit（’自定义事件名’，要发送的值）发送数据，在组件B
中通过bus.emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.emit（’自定义事
件名’，要发送的值）发送数据，在组件B中通过bus.on（‘自定义事件名‘,function(v) { 
//v即为要接收的值 }）接收数据。

还有一种就是昨天讲的Vuex........

BUS传值的步骤：

1、创建一个空的vue并抛出

import Vue from 'vue'

const Bus = new Vue();

export default Bus;

2、在main.js全局导入BUS.js

//引入bus

import Bus from './utils/bus'

// 挂载到Vue原型上

Vue.prototype.$bus = Bus;

3、数据传递

 A组件派发
 this.$bus.$emit('up', this.str)
 
 B组件监听：
   created () {
    this.getData();
  },
  methods: {
    getData () {
      // 监听派发的事件
      this.$bus.$on('up', v => {
        console.log(v)
        v && (this.str = v);
      })
    }
  }