【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

这篇具有很好参考价值的文章主要介绍了【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写法一(vue3的写法)

<template>
  <HelloWorld />
  <h1>{{ a3 }}</h1>
  <h1>{{ b3 }}</h1>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, provide, readonly, reactive, toRefs } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const a3 = ref("1000");
    const obj3 = reactive({ // 建立响应式映射
      b3: 'bbb'
    })

    provide("a3", readonly(a3)); // readonly设置provide指定属性名为只读
    provide("obj3", obj3);

    setTimeout(() => {
      a3.value = "2000";
      obj3.b3 = "bbbbbb";
    }, 3000);
    
    return { // 返回值给到setup
      a3,
      ...toRefs(obj3) // 结构reactive内的对象属性,具体作用参考下面的截图
    };
  },
};
</script>
toRefs定义:

toRefs可以将对象(只能接收rective对象)中的属性变成响应式。

正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。

toRefs什么时候用?

数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构, 会让改对象失去响应式, 所有一般解构的时候 借助 toRefs 来解构仍然带有响应式。

解构后, 我们就不需要 用 对象.属性了, 而是可以直接使用属性,来简化。

<h3>{{name}}</h3>
let obj = reactive({ name:'kebi' })
return {
	...toRefs(obj)
}

写法二(vue2的写法)

扩展:Vue使用provide各种传值后inject获取undefined的问题及解决
vue2的写法是函数式写法,如果以vue3的写法例如:

// 父组件
mounted () {
	provide("obj3", obj3);
}
// 子组件
mounted () {
	const list = inject('list');
}

则会产生inject获取后打印log undefined 这个问题,解决办法是写成函数式的,如下:

<template>
  <div>
    <div>Son1的msg:{{ msg }}</div>
    <Son2></Son2>
  </div>
</template>

<script>
import Son2 from './Son2.vue';
import { inject, provide, readonly } from 'vue';

export default {
  name: 'Son1',
  components: {
    Son2,
  },
  data () {
    return {
      sMsg: '',
    }
  },
  provide () {
    return {
      msg: readonly(inject('msg') + '->son1'),
    }
  },
  inject: ['msg'],
  mounted () {
    // this.sMsg = inject('msg') + '->son1';
    // console.log('this.sMsg', this.sMsg)
  }
};
</script>

写法三(vue3的写法)

父组件provide/inject
<template>
  <!-- child component -->
  <child-components></child-components>
  <!-- parent component -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="Please enter"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        add
      </button>
    </div>
  </div>
</template>
<script setup>
	import { ref, provide } from 'vue'
	import ChildComponents from './child.vue'
	const list = ref(['JavaScript', 'HTML', 'CSS'])
	const value = ref('')
	// Provide data to child components.
	provide('list', list.value)
	// event handling function triggered by add
	const handleAdd = () => {
	  list.value.push(value.value)
	  value.value = ''
	}
</script>
子组件provide/inject

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
	import { inject } from 'vue'
	// Accept data provided by parent component
	const list = inject('list')
</script>
ref,reactive的区别:

vue3的写法,javascript,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-640133.html

到了这里,关于【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中的provide/inject你知道吗(vue2、vue3)?

    昨天看一个项目代码看到了provide,但是学习的时候也没看到,看了官网才知道vue还有这个API。多数情况下,provide会和inject一起使用,又叫“依赖注入”。 “依赖注入”主要是解决父子组件传值“props逐级传递”问题。 所以,provide/inject的作用就是组件间的传值。 1.provide pr

    2024年02月08日
    浏览(50)
  • Vue3的组合式API中如何使用provide/inject?

    听说 Vue 3 加入了超多酷炫的新功能,比如组合式 API 等等。今天我们就来聊聊 Vue 3 中的组合式 API,并且如何使用 provide/inject 来搞定它! 首先,我们来了解一下组合式 API 是什么。其实,组合式 API 就是一个用来构建和组合函数的工具,它能让我们的代码更加简洁、可读性更

    2024年02月11日
    浏览(44)
  • 【Vue3】pinia管理数据的三种方式

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年04月13日
    浏览(39)
  • vue学习,使用provide/inject通信

    提示:组件的provide,可以被其内所有层级的组件,通过inject引用 需求:使用provide/inject通信 1、AA.vue 2、BB.vue 3、CC.vue 4、DD.vue AA组件引用BB组件 BB组件引用CC组件 CC组件引用DD组件 BB、CC、DD都可以通过 inject 获取到AA的 provide provide与inject之间的通讯,既可以传输数据,也可以传

    2024年01月18日
    浏览(55)
  • vue3.0如何关闭eslint校验的三种方法

    一、在创建vue3项目时的要选择ESLint with error prevention only此选项! 1、选择Manually select feature(手动选择功能)这个选项。 2、选择必用的babel,router,vuex,css功能不要选择(linter)这个选项,从根源上避免ESLint的出现。 3、 选择vue3版本。 二、通过找到并打开.eslintrc.js  文件,把 

    2024年02月11日
    浏览(71)
  • Vue3-04-reactive() 响应式失效的三种情况

    属性作为参数案例 整个对象作为参数

    2024年02月05日
    浏览(50)
  • 【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法(已解决)

    1、html 2、定义reactive变量 3、重新赋值   1、html 2、定义ref变量 3、赋值 第三种方案:push(不推荐)

    2024年02月15日
    浏览(48)
  • HTML中CSS的三种写法

    原文网址:HTML中CSS的三种写法_IT利刃出鞘的博客-CSDN博客 本文介绍在前端HTML中写CSS的三种方法。 有内联样式、内部样式、外部样式。优先级为:内联样式 内部样式 外部样式。当同一个样式在不同位置定义时,会使用优先级高的样式。 行内样式,又叫做标签样式,写在标签

    2024年02月13日
    浏览(80)
  • vue2.x中的provide和inject用法

    父子通信 兄弟通信 跨级通信 1、类型 2、详细 3、示例 爷组件 父组件 孙组件 对比一下前后差异:无论点击多少次,孙组件中的诞生于 year 字段永远都是1995 并不会发生变化,通过 方式1、方式2、方式4传值是可以响应的。 正是官网所提到的: provide 和 inject 绑定并不是可响应

    2024年02月05日
    浏览(47)
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    一、流程: 微信提供的扫码方式有两种,分别是: 根据文档我们可以知道关于扫码授权的模式整体流程为: 二、前置条件: 微信开发官网 申请: appid: ‘’, // 后端提供 redirect_uri: ‘’, // 后端提供 AppSecret // 后端提供 三、具体登录实现 实现方式一: 使用vue插件: 使用: 结果

    2023年04月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包