【Vue3 从入门到实战进阶式掌握完整知识体系】032-Composition API：toRef和context

╰半夏微凉° 2023-10-03 09:48 6阅读 0赞

### 文章目录 ###

*   *  3、toRef和context
     *   *  使用toRef
         *  运行结果
         *  context中的attrs和slots
         *  运行结果
         *  context中的emit
         *  运行结果

## 3、toRef和context ##

### 使用toRef ###

> 解构的属性可能不存在，使用toRef给一个默认值，就能够在以后改变的时候实现响应式；
> 
> 但并不建议这么做，无数据的时候可以给空，或者默认值；

<!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 vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
    
      const app = Vue.createApp({
         
        // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
        template: `
          <div>age: {
          {age}}</div>
        `,
        setup(props, context){
         
          // 从 vue 引入 reactive
          const {
          reactive, toRef } = Vue;
          // 定义一个变量 nameObj 对象
          let nameObj = reactive({
         name: 'zibo'});
          const age = toRef(nameObj, 'age');
          // 2s 后改变其内容
          setTimeout(() => {
         
            age.value = 25;
          }, 2000);
          return{
         
            age
          }
        }
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210614171532315][]

### context中的attrs和slots ###

<!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 vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
    
      // 我们在父组件模板里面使用子组件 test 的时候，传参数
      const app = Vue.createApp({
         
        template: `
          <test app="app">parent</test>
        `,
      });
    
      app.component('test', {
         
        // template:`
        //   <div>child</div>
        // `,
        setup(props, context){
         
          const {
          h } = Vue;
          const {
          attrs, slots, emit } = context;
          console.log("attrs.app：", attrs.app); // 父组件传递过来的 None-Props 属性
          console.log("slots.default()：", slots.default()[0].children); // parent
          console.log("slots.default()：", slots.default()); // 获取插槽内容
          // 不写 template ，使得 setup 函数返回一个虚拟 DOM 函数
          return () => h('div', {
         }, slots.default());
        }
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210615211426574][]

### context中的emit ###

<!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 vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
    
      // 我们在父组件模板里面使用子组件 test 的时候，传参数
      const app = Vue.createApp({
         
        methods: {
         
          handleClick(){
         
            console.log("父组件里面的 handleClick 事件被触发了！");
          }
        },
        template: `
          <test @handleClick="handleClick">parent</test>
        `,
      });
    
      app.component('test', {
         
        template:`
          <div @click="handleClick">点我对外触发事件</div>
        `,
        setup(props, context){
         
          const {
          h } = Vue;
          const {
          emit } = context;
          // emit 用于子组件对外触发事件
          function handleClick(){
         
            emit('handleClick');
          }
          return {
         
            handleClick
          }
        }
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210615211924804][]

[image-20210614171532315]: https://img-blog.csdnimg.cn/img_convert/1d4dac38b9f4600d42e84332983d61de.png
[image-20210615211426574]: https://img-blog.csdnimg.cn/img_convert/6bfecc4bdb87d50c8841a9bd81b52bde.png
[image-20210615211924804]: https://img-blog.csdnimg.cn/img_convert/b4a880d7394ec5e9e4ccaeeb44d5fd46.png