【Vue3从零开始-第六章】6-3 toRef和setup的context参数

2022-09-27 275

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第六章】6-3 toRef和setup的context参数

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了vue的ref和reactive响应式引用的用法，本章节中将会继续学习compositionAPI中的知识点toRef和setup的context参数。

toRef

之前的文章中，我们学过一个类似的方法toRefs，这两者的区别不仅是多了个s而已，两者的用法也是不一样的哦。

🔥 toRefs是可以用来解构一个reactive函数包裹的对象，解构出来的值可以直接返回给模板并直接渲染出来。

const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props, context){
      let { reactive, toRefs } = Vue
      let data = reactive({name: 'JueJin'})
      const {name} = toRefs(data)
      setTimeout(() => {
        name.value = 'Hello World'
      }, 2000)
      return{ name }
    }
});
复制代码

网络异常，图片无法展示

如果此时我们需要在data中解构出一个没有定义过的值age，会有怎样的结果呢？

const app = Vue.createApp({
    template: `
      <div>{{name}} - {{age}}</div>
    `,
    setup(props, context){
      let { reactive, toRefs } = Vue
      let data = reactive({name: 'JueJin'})
      const {name, age} = toRefs(data)
      setTimeout(() => {
        name.value = 'Hello World'
        age.value = 18
      }, 2000)
      return{ name, age }
    }
  });
复制代码

C00P07(]1MT86`IVK7~KA`D.png

页面上并不会渲染出age这个值，而且浏览器控制台也会报错，提示我们无法设置未定义的属性

此时我们就不需要使用toRefs去解构了，可以使用一个新的函数toRef

🔥 toRef是用来设置未定义的属性值的，当需要解构的对象中没有定义某个值，而我们需要去修改某个值的时候，就可以使用toRef。

const app = Vue.createApp({
    template: `
      <div>{{age}}</div>
    `,
    setup(props, context){
      let { reactive, toRef } = Vue
      let data = reactive({name: 'JueJin'})
      // 此处是定义了一个age，并从data中取出
      const age = toRef(data, 'age')
      setTimeout(() => {
        age.value = 18
      }, 2000)
      return{ age }
    }
});
复制代码

通过toRef函数尝试从data中取出age，如果可以取到就直接赋值给定义的age，如果取不到值就给一个默认空的响应式数据值。

网络异常，图片无法展示

现在从浏览器中会发现是可以正常渲染出未定义的age值的。

📢 但是此处不建议这样去使用，如果大家要去修改某个值，最好是在对象中定义好一个默认值，然后再去修改。

context

在setup函数中会接收两个参数：props和context。

之前的内容中我们学过这两个参数的作用，props是外部传递过来的参数，context是上下文的数据。

外部传递什么，props里面就接收什么，所以下面的内容中我们主要去学习一下context。

<script>
  const app = Vue.createApp({
    template: `
      <child />
    `
  });
  app.component('child', {
    template: `<div>child</div>`,
    setup(props, context){
      const { attrs, slots, emit} = context
      return {}
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

context中有三个参数：attrs、slots和emit

attrs

我们可以先把attrs打印出来看看里面有些啥。

console.log('attrs:', attrs)
复制代码

23WN)67@0M@U8UOCL5F%{]R.png

打印出来之后会发现好像并没有什么特别的东西显示出来。

❓ 那attrs是什么呢？

❗️ attrs就是一个None-Props属性

const app = Vue.createApp({
    template: `
      <child app='NoneProps' />
    `
});
复制代码

父组件通过标签的形式向子组件传递了一个参数app。

子组件正常情况下是通过props:['app']这种方式去接收的。

如果子组件不接收的话，那这个app就是一个None-Props属性了。

此时我们去打印一下attrs.app，看看会打印出什么值出来。

console.log('attrs:', attrs.app)
复制代码

1KL4D$XC~WN}8(OYFT{$NM9.png

通过浏览器控制台会发现，可以正常打印出父组件通过标签传递的None-Props属性app的值。

slots

slots就是以前的文章中我们学过的插槽的概念，父组件在子组件标签里面传递DOM节点给子组件渲染出来。

<script>
  const app = Vue.createApp({
    template: `
      <child>
        <div>父组件内容</div>  
      </child>
    `
  });
  app.component('child', {
    template: `<div>child</div>`,
    setup(props, context){
      const { attrs, slots, emit} = context
      console.log('slots:', slots)
      return {}
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

$TS~5{N5@1OI287V6]BA}_QO.png$

此时页面上渲染的还是子组件的内容，并没有把父组件里面传递过来的DOM元素渲染出来。

通过打印slots，可以看出里面是有一个default函数的。

那我们再把default函数打印出来看看里面是啥东西。

console.log('slots:', slots.default())
复制代码

U7]CCXKDC{JH{4YE4JAW{0T.png

✋🏻 打印出来的内容是一个虚拟DOM，那我们是不是可以在子组件中直接返回这个虚拟DOM呢？

app.component('child', {
    template: `<div>child</div>`,
    setup(props, context){
      const { h } = Vue
      const { attrs, slots, emit} = context
      console.log('slots:', slots.default())
      return () => h('div', {}, slots.default())
    }
})
复制代码

在setup函数中通过h函数（vue底层中的创建虚拟DOM的一个函数，由于用到的地方不对，所以没有具体学习和讲解）创建一个虚拟DOM，并将插槽的默认函数slots.default()返回到外部即可。

TEI3B4M6L4IXH@GT_0YL(R3.png

emit

emit就是以前的文章中我们学过的子组件触发父组件方法的概念，当我们点击子组件元素时，会触发this.$emit()函数然后调用父组件中的事件方法。

在setup函数中要怎么去触发父组件的事件方法呢？

<script>
  const app = Vue.createApp({
    methods: {
      handleChange(){
        console.log('触发事件')
      }
    },
    template: `
      <child @change="handleChange" />
    `
  });
  app.component('child', {
    template: `<div @click='handleClick'>child</div>`,
    setup(props, context){
      const { attrs, slots, emit} = context
      function handleClick(){
        emit('change')
      }
      return { handleClick }
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

在子组件中的模板元素上定义一个点击事件，并调用setup函数中的事件方法。

事件方法中通过emit函数，传递一个事件名称，并通过return返回给外部。

父组件中接收emit中的事件名称，然后调用父组件中自己的函数。

ZG][%2ZJVT5S4CSESM5XF42.png

点击页面子组件内容时，就会打印出父组件中的console.log()

总结

本篇文章中主要和大家一起学习了toRef函数和setup函数中的content参数。

在content参数中有三个值：attrs、slots和emit，这三个值都和以前学过的内容有关，只是通过compositionAPI中的语法变得更加简介。

由于本篇文章中的内容比较复杂，也是理解setup函数的关键知识点，所以希望大家多多练习，大家加油💪🏻💪🏻

【Vue3从零开始-第六章】6-3 toRef和setup的context参数

前言

toRef

context

attrs

slots

emit

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-第六章】6-3 toRef和setup的context参数

前言

toRef

context

attrs

slots

emit

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景