Vue组件之间的数据共享

学习目标：
1、Vue组件的数据共享
2、Vue中 ref 的 引用

Vue组件之间的数据共享

1、组件之间的关系

• 父子关系
• 兄弟关系

2、父组件向子组件传值

父组件向子组件传值 使用自定义属性；

2-1、父组件绑定属性，提供数据
Left.vue

<template>
<div class="left">
  <p>我是Left组件</p>
  <MyCount :msg = "message"></MyCount>
</div>
</template>

<script>
export default {
name: "Left",
  data(){
  return {
    message:'床前明月光'
  }
  }
}
</script>

2-2、子组件通过props自定义属性接收数据
Count.vue

<template>
<div class="count">
  <p>count的值是：{{count}}</p>
  <p>Left父组件向count子组件传的值：{{msg}}</p>
  <button @click="add">+1</button>
</div>
</template>

<script>
export default {
  name: "Count",
  props:{
    init:{
      default:66
    },
    msg:{
      type:String
    }
  },
  data(){
  return{
    count:this.init
  }
  },
  methods:{
  add(){
    this.count +=1;
  }
  }
}
</script>

<style scoped>

</style>

3、子组件向父组件传值

子组件向传值 父组件使用自定义事件；

this.$emit('change',this,count)

this.$emit()方法的参数：

• 第一个参数是 自定义事件名字
• 第二个参数是 要传的新值

子组件 right.vue

<template>
<div class="right">
  <p>
    我是right组件
  </p>
  <button @click="addNum">+1</button>
  <p>number的值：{{number}}</p>
</div>
</template>

<script>
export default {
  name: "Right",
  data(){
    return {
    number:5
    }

  },
  methods:{
    addNum(){
      this.number+=1;
      this.$emit('change',this.number)
    }

  }
}
</script>

父组件接收数据

<Right @change="changeNumber"></Right>
  methods:{
    changeNumber(){
      console.log('555555555')
    }
  }

</script>

4、兄弟组件之间传值

兄弟组件之间传值 eventbus 方案；

1、创建 eventbus.js

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

2、兄弟组件数据发送方

<button @click="share">点击把数据发送给right.vue</button>


<script>
import bus from '../assets/eventBus';
export default {
name: "Left",
  data(){
  return {
    brother:'张永盛'
  }
  },
  methods:{
  share() {
    bus.$emit('share',this.brother)
  }
  }
}
</script>

3、兄弟组件数据接收方

<p>Left组件发送给right组件的数据:{{str}}</p>


<script>
import bus from '../assets/eventBus';
export default {
  name: "Right",
  data(){
    return {
      str:''
    }

  },
  created() {
    bus.$on('share',(val)=>{
     this.str = val;
    })
  },

兄弟组件传值：
1、创建eventBus.js,向外共享一个Vue实例对象；
2、数据发送方通过调用 bus.$emit(‘事件名称’,要发送的数据) 方法 触发自定义事件发送数据；

3、数据接收方通过调用 bus.$on(‘事件名称’,事件处理函数) 方法注册一个 自定义事件接收数据

ref 的引用

什么是 ref 引用？
ref 引用是指在不依赖jQuery的情况下，获取 DOM元素或组件的引用；

每一个Vue实例上，都包含一个 $ref 对象，里面储存着DOM元素或组件的引用；   
默认情况下，$ref 是一个空对象;

1、使用 ref 引用DOM

步骤一：
给要获取的元素添加ref;

 <p ref="p1">   我是right组件  </p>

步骤二：
//通过 this.$refs.p1可以操作DOM

 this.$refs.p1.style.color = 'red';

2、使用 ref 引用组件实例

步骤一：给组件添加ref属性

<Left ref = 'comLeft'></Left>

步骤二：
//通过 this.$refs.comLeft 可以操作组件中的数据

this.$refs.comLeft.message = "message的值被替换了！！！！"

thix.$nextTick(cb) 方法

thix.$nextTick(cb) 方法，会等DOM的组件更新完之后，再执行cb回调函数；从而保证cb回调函数可以操作到最新的DOM；

this.$nextTick(
()=>{
this.$refs.inputRef.focus();
}
)

错误
TypeError: Cannot read properties of undefined (reading ‘focus’)
指的是 focus 前的内容没有定义；