【博学谷学习记录】超强总结,用心分享丨前端开发:Vue组件通信

Vue组件通信

每个组件有自己的数据, 提供在data中
每个组件数据独立, 组件数据无法互相直接访问 (合理的)
但是如果需要跨组件访问数据, 怎么办呢？ => 组件通信
组件通信的方式有很多: 现在先关注两种, 父传子 子传父

一、父传子

需求：父组件 -> 子组件 传值
首先明确父和子是谁, 在父引入子 (被引入的是子)
父传子语法:
1.父组件通过给子组件加属性传值

<Son price="100" title="不错" :info="msg"></Son>

2.子组件中, 通过props属性接收

props: ['price', 'title', 'info']

App.vue

<template>
  <div>
    <Son :num = 'num'></Son>
  </div>
</template>

<script>
import Son from './componets/Son.vue'
export default {
  data() {
    return {
      num: 1
    }
  },
  components:{
    Son,
  }
}
</script>

Son.vue

<template>
  <div>
    num:{{num}}
  </div>
</template>

<script>
export default {
  name: 'ts-son',
  props: {
    num: Number,
  },
}
</script>

运行结果：

二、单向数据流

在vue中需要遵循单向数据流原则： （从父到子的单向数据流动, 叫单向数据流）

1. 父组件的数据变化了，会自动向下流动影响到子组件
2. 子组件不能直接修改父组件传递过来的 props， props是只读的！

三、子传父

子传父的基本语法：

1. 子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参的
2. 父组件可以给子组件注册对应的自定义事件

Son.vue

<template>
  <div>
    num:{{num}}
    <br>
    <button @click="changeNum">+1</button>
  </div>
</template>

<script>
export default {
  name: 'ts-son',
  data(){
    return{
     
    }
  },
  props: {
    num: Number,
  },
  methods:{
    changeNum(){
      this.$emit('changeNum',1)
    }
  }
}
</script>

App.vue

<template>
  <div>
    <Son :num = 'num' @changeNum='dealNum'></Son>
  </div>
</template>

<script>
import Son from './componets/Son.vue'
export default {
  data() {
    return {
      num: 1
    }
  },
  components:{
    Son,
  },
  methods:{
    dealNum(add){
      this.num += add
    }
  }
}
</script>

运行结果：

四、v-model组件使用

我们经常遇到一种场景：
1.父组件提供一个数据给子组件使用（父传子）
2.子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。
这种场景可以使用v-model进行简写。
定义组件的时候，注意接收的值叫value， 子传父触发的事件叫 input
Son.vue

<template>
  <div>
    num:{{value}}
    <br>
    <button @click="changeNum">+1</button>
  </div>
</template>

<script>
export default {
  name: 'ts-son',
  data(){
    return{
     
    }
  },
  props: {
    value: Number,
  },
  methods:{
    changeNum(){
      this.$emit('input',this.value+1)
    }
  }
}
</script>

App.vue

<template>
  <div>
    <Son :value = 'num' v-model="num"></Son>
  </div>
</template>

<script>
import Son from './componets/Son.vue'
export default {
  data() {
    return {
      num: 1
    }
  },
  components:{
    Son,
  },
}
</script>

运行结果：