vue3中的组件间通信

父给子传值 props

我们通过在父组件引用子组件的时候，可以通过自定义属性进行值的传递，在子组件通过 props 进行接受。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test"/> // 通过自定义属性 toChild
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    return {
      test
    }
  },
  components:{
    Child
  },
}
</script>

//child.vue
<template>
  <div class="child">
    子组件接收的值:{{toChild}}
  </div>
</template>
<script>
export default {
  name:"child",
  props:["toChild"], //通过props接收自定义属性 toChild
}
</script>

$attrs给子组件传值

我们的 $attrs 只会包括未被 props 继承的属性。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test" :toTest="`测试数据`"/>
  </div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    return {
      test
    }
  },
  components:{
    Child
  },  
}
</script>

//child.vue
<script>
export default {
  name:"child",
  props:["toChild"],
  created:function(){
    console.log(this.$attrs,"test")
  },
}
</script>

我们控制台的打印为：

$parent

通过 $parent 获取父级的时候，可以获取父级的全部属性。

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值:{{test}}</span>
    <Child :toChild="test" :toTest="`测试数据`"/>
  </div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    const bar = ref("这你都可以拿得到")
    return {
      test,
      bar
    }
  },
  components:{
    Child
  },  
}
</script>

//child.vue
<template>
  <div class="child">
    子组件接收的值:{{toChild}}
  </div>
</template>
<script>
export default {
  name:"child",
  props:["toChild"],
  created:function(){
    console.log("bar:",this.$parent.bar)
    console.log("test:",this.$parent.test)
  },
}
</script>

我们控制台的打印为：

可以看到我们并没有对 test 进行抛出，但是我们还是可以获取到，同时需要注意的是，我们获取的方式是使用的父级的变量名。

provide / inject

//parent.vue
<script>
import {ref,provide} from 'vue'
export default {
  name: "parent",
  setup(){
    const test = ref("传给子组件")
    provide("testpro",test)
  },
  components:{
    Child
  },  
}
</script>

//child.vue
<script>
import {inject} from 'vue'
export default {
  name:"child",
  created:function(){
    console.log("test:",inject("testpro"));
  },
}
</script>

在我们的控制台打印如下：

通过 provide / inject 获取只需要通过对应的API 提供，注入就可以获取，不需要抛出。

子组件向父组件传递 emit

//parent.vue
<template>
  <div class="search">
    <span>这是父组件的值</span>
    <Child @testEmit="updateCity"/>
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  name: "parent"
  methods:{
    updateCity(data){
        console.log("子组件传递的：",data);
    }
  },
  components:{
    Child
  },  
}
</script>

//child.vue
<template>
  <div class="child" @click="toChild">
  </div>
</template>
<script>
export default {
  name:"child",
  methods:{
      toChild(){
        this.$emit("testEmit","传给父组件")
      }
  },
}
</script>

但是这种方法在 Vue3.x 中不推荐使用。