Vue 3 provide 和 inject 传参

<body>
  <div id="app"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, provide } = Vue;
      const name = ref('zhangsan');
      // 定义修改方法在父组件
      const changeName = (value) => {
        name.value = value;
      }
      // 通过provide传递参数
      provide('name', name);
      provide('changeName', changeName);
      return {
      }
    },
    template: `<child />`
  })
  app.component('child', {
    template: `<div @click="handleChangeName">{{name}}</div>`,
    setup() {
      const { inject } = Vue;
      // 获取参数
      const name = inject('name');
      const changeName = inject('changeName');
      // 调用修改方法修改父组件的值
      const handleChangeName = () => {
        changeName('lisi')
      }
      return {
        name,
        handleChangeName
      }
    }
  })
  const vm = app.mount("#app");
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容