一、父子组件间传值

vue3.0和2.0父子传参时略有区别，因为在setup起点函数中无法使用this指向组件实例，所以，变化主要是在子组件中，可以在setup起点函数中接收到props和{emit}参数，即：setup(props, { emit }){}，依此来实现父子传值

1. 在父组件中

与2.0比几乎没什么变化

<template>
  <div>
    <div>{{ title }}</div>
    <div>
      <HelloWorld :msg="msg" @change="changep"></HelloWorld>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let title = ref("父组件");
    let msg = ref("我是父组件传递给子组件的参数");

    const changep = (e) => {
      console.log(e);
      title.value = e;
    };
    return { msg, title, changep };
  },
};
</script>

2. 在子组件中

1. setup的第一个参数props，可以实现在setup中，使用父组件传过来的值
2. setup的第二个参数解构出emit，可以用于子组件发布事件

<template>
  <div class="hello" style="background: #938711; padding: 10px">
    <div>子组件</div>
    <div>{{ msg }}</div>
    <button @click="changParent">子传父触发按钮</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    console.log(props);

    // 子传父
    const changParent = () => {
      emit("change", "我是子组件传递给父组件的参数");
    };
    return { changParent };
  },
};
</script>

二、父组件给子组件、孙组件、共享数据和方法

vue2.0通过 provide inject 来实现，vue3.0也一样,只是使用方式不同

1. 在父组件中

• 总结

1. provide()函数可以多次被调用
2. 数据和方法需要用ref()创建成响应式的

• 使用

1. 引入provide：import { provide, ref } from "vue";
2. 使用provide提供共享的数据和方法：provide("pmsg", pmsg);

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { provide, ref } from "vue";
export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      msg: "父属性",
    };
  },
  setup() {
    const pmsg = ref("父属性");
    const pchange = ref(() => {
      console.log("父方法");
    });
    provide("pmsg", pmsg);
    provide("pchange", pchange);
  },
};
</script>

2. 在子组件中

• 总结
  inject ()函数可以多次被调用
• 使用

1. 引入inject ：import { inject } from "vue";
2. 使用inject()获取父组件提供的数据和方法：provide("pmsg", pmsg);

<template>
  <div class="hello" @click="change">{{ msg }}</div>
</template>

<script>
import { inject } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const msg = inject("pmsg");
    const change = inject("pchange");
    return { msg, change };
  },
};
</script>