【Vue 从入门到实战进阶式掌握完整知识体系】02

2025-07-23 23:56:41

【Vue 从入门到实战进阶式掌握完整知识体系】02 、toRef和context使用toRef 解构的属性可能不存在，使用toRef给一个默认值，就能够在以后改变的时候实现响应式；但并不建议这么做，无数据的时候可以给空，或者默认值；代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"

【Vue 从入门到实战进阶式掌握完整知识体系】02

、toRef和context

使用toRef

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  ct app = ({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>age: {{age}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 reactive
      ct { reactive, toRef } = Vue;
      // 定义一个变量 nameObj 对象
      let nameObj = reactive({name: 'zibo'});
      ct age = toRef(nameObj, 'age');
      // 2s 后改变其内容
      setTimeout(() => {
        age.value = 25;
      }, 2000);
      return{
        age
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106141715215

context中的attrs和slots

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  // 我们在父组件模板里面使用子组件 test 的时候，传参数
  ct app = ({
    template: `
      <test app="app">parent</test>
    `,
  });

  appponent('test', {
    // template:`
    //   <div>child</div>
    // `,
    setup(props, context){
      ct { h } = Vue;
      ct { attrs, slots, emit } = context;
      cole.log("attrs.app：", attrs.app); // 父组件传递过来的 one-Props 属性
      cole.log("slots.default()：", slots.default()[0].children); // parent
      cole.log("slots.default()：", slots.default()); // 获取插槽内容
      // 不写 template ，使得 setup 函数返回一个虚拟 DOM 函数
      return () => h('div', {}, slots.default());
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210615211426574

context中的emit

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

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

<script>

  // 我们在父组件模板里面使用子组件 test 的时候，传参数
  ct app = ({
    methods: {
      handleClick(){
        cole.log("父组件里面的 handleClick 事件被触发了！");
      }
    },
    template: `
      <test @handleClick="handleClick">parent</test>
    `,
  });

  appponent('test', {
    template:`
      <div @click="handleClick">点我对外触发事件</div>
    `,
    setup(props, context){
      ct { h } = Vue;
      ct { emit } = context;
      // emit 用于子组件对外触发事件
      function handleClick(){
        emit('handleClick');
      }
      return {
        handleClick
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210615211924804本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除入门事件apicompositionvue

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200002.html

本站网友破碎虚空	5分钟前发表
context){ // 从 vue 引入 reactive ct { reactive
本站网友保龄球	15分钟前发表
{}
本站网友杭州东方润园	11分钟前发表
template
本站网友安宫牛黄丸的功效与作用	22分钟前发表
setup(props
本站网友韩国melon	21分钟前发表
template
本站网友治疗湿疹的方法	7分钟前发表
使用toRef给一个默认值
本站网友中国利比亚	2分钟前发表
就能够在以后改变的时候实现响应式；但并不建议这么做

【Vue 从入门到实战进阶式掌握完整知识体系】02