Vue3基础(十san)___父子组件通信___props、emit___provide、inject

1.props、emit

父给子组件vDoem传送属性foo，传送方法changeee

<template >
  <div class="container">
    <p @click="change">{
   {
   newObj.name.value}}</p>
    <v-dome :foo="foo" @changeee="change"></v-dome>
  </div>
</template>
<script>
import vDome from "./dome01.vue";
import {
    ref, toRef, toRefs } from "vue";
export default {
   
  setup() {
   
    let obj = {
    name: "alice", age: 12 };
    let foo = ref({
    name: "foo", age: 100 });
    let newObj = toRefs(obj);
    function change(q) {
   
      newObj.name.value = "Tome";
      console.log(q)
    }
    return {
    newObj, change, foo };
  },
  components: {
   
    vDome
  }
};
</script>
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

子组件接受属性，触发方法

子组件接受属性，触发方法
<template >
  <div class="container">
    <p>obj1====={
   {
   obj1}}</p>
    <p>obj2====={
   {
   obj2}}</p>
    <p>obj3====={
   {
   obj3}}</p>
    <p>父组件传送的foo {
   {
   foo}}</p>
    <button @click="emitChange">触发父级传送的事件</button>
  </div>
</template>
<script>
import {
    ref } from "vue";
export default {
   
  props: ["foo"],
  setup(p, {
    emit }) {
   
    const obj = ref({
    obj1: "obj111", obj2: "obj222", obj3: "obj333" });
    const emitChange = () => {
   
      emit("changeee", "子组件传送给父组件changeeechangeee");
    };
    return {
    ...obj.value, emitChange };
  }
};
</script>
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.provide、inject

父级

<template >
  <div class="container">
    <v-dome ></v-dome>
  </div>
</template>
<script>
import vDome from "./dome01.vue";
export default {
   
  setup() {
   
  },
  components: {
   
    vDome
  },
      provide: {
   
      zjqqqqq: '这是从父级传送过来的一段话',
      funn:(numlist)=>{
   console.log(numlist)}
  },
};
</script>
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

子

<template >
  <div class="container">
    <p>obj1====={
   {
   obj1}}</p>
    <p>obj2====={
   {
   obj2}}</p>
    <p>obj3====={
   {
   obj3}}</p>
    <p>父组件传送的zjqqqqq {
   {
   zjqqqqq}}</p>
    <button @click="funn('子触发父传递事件')">改变 myNum</button>
  </div>
</template>
<script>
import {
    ref } from "vue";
export default {
   
  setup(p, {
    emit }) {
   
    const obj = ref({
    obj1: "obj111", obj2: "obj222", obj3: "obj333" });
    return {
    ...obj.value };
  },
  inject: ["zjqqqqq", "funn"]
};
</script>s
<style  scoped>
</style>

        

          
        
        
        

          

          AI 代码解读