vue3-组合式api-teleport
摘要：teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，最常见的例子就是模态框。 <template> <div> <!-- 弹窗 --> <myModal></myModal> </div> </template> <script> impor
阅读全文
posted @ 2022-11-14 11:15
11 2022 档案
vue3-组合式api-provide/inject
摘要：provide/inject 适用于跨级通信，例如在父组件中改变值，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值 一、父组件 <template> <div> <!-- 子组件 --> <son></son> <button @click="changeName">改变名字</butto
阅读全文
posted @ 2022-11-09 13:21
vue3-组合式api-参数(props,context)及父子组件传值
摘要：一、父组件 <template> <div> <h2>我是父组件</h2> <div>counter:{{ counter }}</div> <button @click="callChildFun">调用子组件方法</button> <children :message="message" @ch
阅读全文
posted @ 2022-11-08 08:41
vue3-组合式api-computed
摘要：<template> <div> msg:{{ msg }} <br /> reverseMsg:{{ reverseMsg }} </div> </template> <script> import { ref, computed } from "vue"; export default { se
阅读全文
posted @ 2022-11-02 14:07
vue3-组合式api-watch,watchEffect
摘要：<template> <div> {{ counter }} <button @click="changeCounter">改变counter</button> <br /> {{ user.name }} <button @click="changeUserName">改变名字</button>
阅读全文
posted @ 2022-11-02 10:56
vue3-组合式api-定义响应式数据-reactive，toRefs
摘要：<template> <div> {{ obj.name }} {{ name }} <button @click="changeObjName">改变名字</button> </div> </template> <script> import { reactive, toRefs } from "
阅读全文
posted @ 2022-11-01 14:37
vue3-组合式api-定义响应式数据-ref
摘要：<template> <div> <!-- 模板会自动解析value值 --> {{ counter }} <button @click="changeCounter">改变counter</button> </div> </template> <script> import { ref } fro
阅读全文
posted @ 2022-11-01 14:01
