provide,Inject

const app = Vue.createApp({
    setup(){
      const {provide,ref,readonly} = Vue;
      const name = ref("hello");
      provide("name",readonly(name));
      const handleClick = (newValue)=>{
        name.value = newValue
      };
      provide("changeName",handleClick)
      return {}
    },
    template:`
      <div>
        <child></child>
      </div>
    `
  })
  app.component("child",{
    setup(){
      const {inject} = Vue;
      const name = inject("name");
      const changeName = inject("changeName")
      const handleClick = ()=>{
        changeName("hello world")
      }
      return{
        name,
        handleClick
      }
    },
    template:`
      <div @click="handleClick">{{name}}</div>
    `
  })
  const vm = app.mount('#root');