【Vue3 从入门到实战 进阶式掌握完整知识体系】037-Composition API:Provide,Inject,模版Ref的用法

·  阅读 194

8、Provide,Inject,模版Ref的用法

基本使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { provide } = Vue;
      provide('name','zibo');
      return{  }
    },
    template: `
      <child />
    `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name 为 key, hello 为默认值(取不到取默认值)
      const name = inject('name', 'hello');
      return{
        name
      }
    },
    template: `
      <div>{{name}}</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>
复制代码

运行结果

image-20210616210100121

子组件修改父组件传递过来的数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { provide,ref } = Vue;
      // 这里将值改为 ref 响应式数据
      provide('name',ref('zibo'));
      return{  }
    },
    template: `
      <child />
    `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name 为 key, hello 为默认值(取不到取默认值)
      const name = inject('name', 'hello');
      function changeName(){
        name.value = "大哥刘备";
      }
      return{
        name, changeName
      }
    },
    template: `
      <div @click="changeName">{{name}}</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>
复制代码

运行结果

image-20210616211643062

子组件让父组件修改父组件里面的数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { provide,ref } = Vue;
      // 这里将值改为 ref 响应式数据
      const name = ref('zibo');
      provide('name',name);
      provide('changeName',changeName);
      // 提供一个修改数据的方法
      function changeName(value){
        name.value = value;
      }
      return{  }
    },
    template: `
      <child />
    `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name 为 key, hello 为默认值(取不到取默认值)
      const name = inject('name', 'hello');
      const change = inject("changeName");
      function changeName(){
        change("二哥关羽");
      }
      return{
        name, changeName
      }
    },
    template: `
      <div @click="changeName">{{name}}</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>
复制代码

运行结果

image-20210616212117007

禁止自组件对父组件传递过来的数据进行修改

设置为只读

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { provide, ref, readonly } = Vue;
      // 这里将值改为 ref 响应式数据
      const name = ref('zibo');
      provide('name',readonly(name));
      provide('changeName',changeName);
      // 提供一个修改数据的方法
      function changeName(value){
        name.value = value;
      }
      return{  }
    },
    template: `
      <child />
    `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name 为 key, hello 为默认值(取不到取默认值)
      const name = inject('name', 'hello');
      const change = inject("changeName");
      function changeName(){
        change("二哥关羽");
        name.value = "三哥张飞";
      }
      return{
        name, changeName
      }
    },
    template: `
      <div @click="changeName">{{name}}</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>
复制代码

运行结果

image-20210616212438661

使用ref获取真实DOM节点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { onMounted, ref } = Vue;
      const hello = ref(null);

      onMounted(() => {
        console.log(hello.value);
      });

      return{ hello }
    },
    template: `
      <div ref="hello">hello world!</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>
复制代码

运行结果

image-20210616213014800

分类:
前端
标签: