Aquí está la cita
1.datos
2.calculado
3. Pasar de padre a hijo
4. Pasar de hijo a padre
5. Enlace de cadena de prototipo y uso de componentes
6. Modelo v de componente padre-hijo
7. nextTick
8. Ranura
9. Ruta useRoute y useRouter
10 .Guardia de ruta
11 .Ciclo de vida
12. El componente principal llama al método del componente secundario ref
13.store
1.datos
<template>
<h1>{
{
name }}</h1>
<h1>{
{
state.age }}</h1>
<h1>{
{
sex }}</h1>
</template>
<script setup lang="ts">
import {
reactive, ref, toRefs } from 'vue'
// ref声明响应式数据,用于声明基本数据类型
//const name = ref('东东吖')
const name =ref<string>("")
// 修改
name.value = '小鲁班'
// reactive声明响应式数据,用于声明引用数据类型
const state = reactive({
age: 24,
sex: '男'
})
// 修改
state.age = 24
// 使用toRefs解构 template可直接使用{
{name}}、{
{sex}}
const {
age, sex} = toRefs(state)
</script>
2.calculado
<template>
<h1>{
{
count }}</h1>
<h1>{
{
doubleCount}}</h1>
</template>
<script setup lang="ts">
import {
ref,computed } from 'vue'
// ref声明响应式数据,用于声明基本数据类型
const count = ref(1)
//computed获取双倍count'
const doubleCount =computed(()=>{
return count.value*2
})
</script>
3. De padre a hijo
componente principal
<script setup lang="ts">
// 引入子组件(组件自动注册)
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="东东吖" />
</template>
<style>
</style>
Subconjunto
<template>
{
{
props.msg}}
<!-- 可省略props
<h1>{
{
msg }}</h1>
</template>
<script setup lang="ts">
// import { defineProps } from 'vue'
// defineProps在<script setup>中自动可用,无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineProps: true】
// 声明props
const props = defineProps({
msg: {
type: String,
default: "",
},
});
</script>
4. Padre niño
//父组件:
<template>
<HelloWorld :msg='state.msg' @changeMsg="changeMsg" />
</template>
<script setup lang="ts">
import {
reactive } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const state = reactive({
msg: "我是父组件原本的值",
});
const changeMsg = (val) => {
state.msg = val;
};
</script>
Subconjunto
//子组件:
<template>
<h1>{
{
msg }}</h1>
<!-- 调用子传父事件
<button @click="changeMsg">点我</button>
</template>
<script setup lang="ts">
import {
defineEmits } from "vue";
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用,无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】
// 声明props
const props = defineProps({
msg: {
type: String,
default: "",
},
});
// 声明emit
const emit = defineEmits(["changeMsg"]);
// 声明子传父事件
const changeMsg = () => {
emit("changeMsg", "我是子组件传过来的值");
};
</script>
5. Unión de cadenas prototipo y uso de componentes.
principal.ts
//main.ts
// 创建vue实例
const app=createApp(App)
// 获取原型
const prototype = app.config.globalProperties
// 绑定参数
prototype.name = '我是挂载在全局上的属性'
//第二种方式:
let helper = new TzPdmHelper(webSite);
app.config.globalProperties.$helper = helper;
//组件内获取使用
//引入
import {
getCurrentInstance } from "vue";
// 获取原型
const {
proxy } = getCurrentInstance();
// 输出
console.log(proxy.name);
console.log(proxy.$helper);
6. Modelo v de componente padre-hijo
componente principal
//父组件:
<template>
<div>父组件:</div>
<div>{
{
state.msg}}</div>
<input type="text" v-model="state.msg">
<HelloWorld
v-model:msg='state.msg'
v-model:age="state.age"
/>
</template>
<script setup lang="ts">
import {
reactive } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const state = reactive({
msg: "我是父组件原本的值",
age:24
});
</script>
Subconjunto
//子组件:
<template>
<div>子组件:</div>
<input type="text" v-model="msg">
<!-- 可省略props
<h1>{
{
msg }}</h1>
<h1>{
{
age}}</h1>
</template>
<script setup lang="ts">
import {
defineEmits } from "vue";
// 声明emit
const emit = defineEmits(["updata:msg", "updata:age"]);
// import { defineEmits, defineProps } from 'vue'
// defineEmits和defineProps在<script setup>中自动可用,无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】
// 声明props
const props = defineProps({
msg: {
type: String,
default: "",
},
age: {
type: Number,
default: 0,
},
});
</script>
7.siguientetick
<template>
<HelloWorld
v-model:msg='state.msg'
/>
</template>
<script setup lang="ts">
import {
reactive ,nextTick } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const state = reactive({
msg: "我是父组件原本的值",
});
// 调用nextTick
nextTick(()=>{
console.log("nextTick执行了...");
state.msg="我是nextTick执行后的值"
})
</script>
8.Ranura
componente principal
//父组件:
<template>
<HelloWorld>
<!-- 匿名插槽
<span>我是默认插槽</span>
<!-- / 具名插槽
<template #title>
<h1>我是具名插槽1</h1>
<h1>我是具名插槽2</h1>
<h1>我是具名插槽3</h1>
</template>
<!-- 作用域插槽
<template #footer="{ scope }">
<footer>作用域插槽——姓名:{
{
scope.name }},年龄{
{
scope.age }}</footer>
</template>
</HelloWorld>
</template>
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>
Subconjunto
//子组件:
<template>
<!-- 匿名插槽
<slot/>
<!-- 具名插槽
<slot name='title'/>
<!-- 作用域插槽
<slot name="footer" :scope="state" />
</template>
<script setup lang="ts">
import {
useSlots, reactive } from 'vue'
const state = reactive({
name: '东东吖',
age: '25岁'
})
script内如何获取插槽信息
const slots = useSlots()
// 匿名插槽使用情况
const defaultSlot = reactive(slots.default && slots.default().length)
console.log("defaultSlot",defaultSlot) // 1
// 具名插槽使用情况
const titleSlot = reactive(slots.title && slots.title().length)
console.log("titleSlot",titleSlot) // 3
</script>
9. Uso de enrutamientoRuta y usoEnrutador
①Crear nuevo enrutador/index.ts
//新建router/index.ts
import {
createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: () => import('../pages/home/Index.vue'),
meta: {
showFooter: true,
requireAuth: false,
}
},
{
path: '/about',
name: 'about',
component: () => import( '../pages/about/Index.vue'),
meta: {
showFooter: true,
requireAuth: false,
}
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
② Registre el enrutador en main.ts
//在main.ts将路由router注册
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts'
const app=createApp(App)
app.use(router).mount('#app')
③Imprimir los resultados en la página.
//在页面打印结果
import {
useRouter, useRoute } from "vue-router";
// 必须先声明调用
const router = useRouter();
const route = useRoute();
// 路由信息
console.log("router", router);
console.log("route",route);
10.Guardia de ruta
// 路由守卫
router.beforeEach((to, from, next) => {
console.log("to",to);
console.log("from",from);
next()
})
11. Ciclo de vida
El mapeo entre las opciones del ciclo de vida de la API opcional y la API combinada
beforeCreate -> creado usando setup()
-> usando setup()
beforeMount -> onBeforeMount
montado -> onMounted
beforeUpdate -> onBeforeUpdate
actualizado -> onUpdated
beforeUnmount -> onBeforeUnmount
desmontado -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activado -> onActivated
desactivado -> onDeactivated
12. El componente principal ajusta la referencia del método del componente secundario.
componente principal
<template>
<HelloWorld
ref='sonRef'
/>
</template>
<script setup lang="ts">
import {
onMounted } from "vue";
// 引入子组件(组件自动注册)
import HelloWorld from "./components/HelloWorld.vue";
const zTreeRef = ref();
onMounted(() => {
sonRef.value.init()
});
</script>
Subconjunto
<template>
<div>子组件</div>
</template>
<script setup lang="ts">
const init=()=>{
console.log('初始化')
}
//导出方法
defineExpose({
init
});
</script>
13.tienda
vuex: [Viaje avanzado de Vue] Cinco conceptos básicos de vuex
① Proceso de uso básico
//下载pinia
npm install pinia -S
principal.ts
//main.ts
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts'
// 引入pinia
import {
createPinia } from 'pinia'
// 创建vue实例
const app=createApp(App)
// 创建 Pinia 实例
const pinia = createPinia()
// 注册挂载到vue实列
app.use(router).use(pinia).mount('#app')
tienda/index.ts
// store/index.ts
import {
defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1:容器的ID,必须是唯一的,后面Pinia会把所有的容器挂载到根容器
// 参数2:一些选项对象,也就是state、getter和action
// 返回值:一个函数,调用即可得到容器实例
export const useMainStore = defineStore('main',{
// 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求
// 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
// 2. 必须是箭头函数,这样是为了更好的 TS 类型推导
state:()=>{
return {
info:"hello,东东吖,我是Pinia"
}
},
getters:{
},
actions:{
}
})
Utilizado dentro de los componentes
//组件内使用
<template>
<div>
<h1>{
{
mainStore.info}}</h1>
</div>
</template>
<script setup lang="ts">
import {
useMainStore } from "../../store/index.ts";
const mainStore = useMainStore();
</script>
<style scoped>
</style>
② Deconstruya los datos en estado y acceda
a store/index.ts
// store/index.ts
import {
defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1:容器的ID,必须是唯一的,后面Pinia会把所有的容器挂载到根容器
// 参数2:一些选项对象,也就是state、getter和action
// 返回值:一个函数,调用即可得到容器实例
export const useMainStore = defineStore('main',{
// 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求
// 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
// 2. 必须是箭头函数,这样是为了更好的 TS 类型推导
state:()=>{
return {
info:"hello,东东吖,我是Pinia",
count:10
}
},
getters:{
},
actions:{
}
})
Utilizado dentro de los componentes
//组件内使用
<template>
<h1>{
{
mainStore.count }}</h1>
<h1>{
{
mainStore.info }}</h1>
<hr />
<h1>{
{
count }}</h1>
<h1>{
{
info }}</h1>
<p>
<button @click="alertData">修改数据count</button>
</p>
</template>
<script lang="ts" setup>
import {
toRefs } from 'vue'
import {
storeToRefs } from 'pinia'
import {
useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据,但是得到的数据是不具有响应式的,只是一次性的
// 相当于仅仅只是...mainStore而已,只是做了reactive处理,并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法:
// 1. 通过使用toRefs函数,因为前面所说相当于是通过reactive处理,因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决,推荐使用
const {
count, info } = storeToRefs(mainStore);
const alertData = () => {
mainStore.count = 10
}
</script>
<style>
</style>
③ Cómo modificar datos en estado (en acciones y componentes)
// 一般的修改
<template>
<h1>{
{
mainStore.count }}</h1>
<h1>{
{
mainStore.info }}</h1>
<hr />
<h1>{
{
count }}</h1>
<h1>{
{
info }}</h1>
<p>
<button @click="alertData">修改数据count</button>
</p>
</template>
<script lang="ts" setup>
import {
toRefs } from 'vue'
import {
storeToRefs } from 'pinia'
import {
useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据,但是得到的数据是不具有响应式的,只是一次性的
// 相当于仅仅只是...mainStore而已,只是做了reactive处理,并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法:
// 1. 通过使用toRefs函数,因为前面所说相当于是通过reactive处理,因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决,推荐使用
const {
count, info } = storeToRefs(mainStore);
const alertData = () => {
// 方式一:最简单的方法,如下
// 解构后更改方式
// count.value = 10
// 结构前更改方式
// mainStore.count = 10
// 方式二:若要同时修改多个数据,建议使用$patch来实现批量更新,在内部做了优化
// mainStore.$patch({
// count: mainStore.count 1,
// info: "hello"
// })
// 方式三:更好的批量更新方法,通过$patch传递一个函数来实现,这里的state就是useMainStore容器中的state
mainStore.$patch(state => {
state.count = 10
state.info = "pinia批量更新" state.count
})
}
</script>
<style>
</style>
//通过actions修改
// store/index.ts
import {
defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1:容器的ID,必须是唯一的,后面Pinia会把所有的容器挂载到根容器
// 参数2:一些选项对象,也就是state、getter和action
// 返回值:一个函数,调用即可得到容器实例
export const useMainStore = defineStore('main',{
// 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求
// 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
// 2. 必须是箭头函数,这样是为了更好的 TS 类型推导
state:()=>{
return {
info:"hello,东东吖,我是Pinia",
count:10
}
},
getters:{
},
// store/index.ts
// 类似于vue2组件的methods,用于封装业务逻辑,修改state
// // 注意:不能使用箭头函数来定义actions,因为箭头函数绑定外部的this
actions:{
changeState (){
this.count = 10
this.info = "actions修改数据"
},
changeStates (num:number){
this.count = num 2
this.info = "actions修改数据"
}
}
})
//组件内使用
<template>
<h1>{
{
mainStore.count }}</h1>
<h1>{
{
mainStore.info }}</h1>
<hr />
<h1>{
{
count }}</h1>
<h1>{
{
info }}</h1>
<p>
<button @click="alertData">修改数据count</button>
</p>
</template>
<script lang="ts" setup>
import {
toRefs } from 'vue'
import {
storeToRefs } from 'pinia'
import {
useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据,但是得到的数据是不具有响应式的,只是一次性的
// 相当于仅仅只是...mainStore而已,只是做了reactive处理,并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法:
// 1. 通过使用toRefs函数,因为前面所说相当于是通过reactive处理,因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决,推荐使用
const {
count, info } = storeToRefs(mainStore);
const alertData = () => {
// 方式四:通过 actions 来修改数据
mainStore.changeState()
mainStore.changeStates(10)
}
</script>
<style>
</style>
③ Uso de getters
store/index.ts
// store/index.ts
import {
defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1:容器的ID,必须是唯一的,后面Pinia会把所有的容器挂载到根容器
// 参数2:一些选项对象,也就是state、getter和action
// 返回值:一个函数,调用即可得到容器实例
export const useMainStore = defineStore('main',{
// 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求
// 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
// 2. 必须是箭头函数,这样是为了更好的 TS 类型推导
state:()=>{
return {
info:"hello,东东吖,我是Pinia",
count:10
}
},
// 类似于组件的computed,用来封装计算属性,具有缓存的功能
getters:{
// 函数接收一个可选参数:state状态对象
count10(state){
return state.count = 10
},
count20(state){
return this.count = 20
},
// 若使用this.count,则必须指明返回数据的类型
count11():number{
return this.count = 11
}
},
// store/index.ts
// 类似于vue2组件的methods,用于封装业务逻辑,修改state
// // 注意:不能使用箭头函数来定义actions,因为箭头函数绑定外部的this
actions:{
changeState (){
this.count = 10
this.info = "actions修改数据"
},
changeStates (num:number){
this.count = num 2
this.info = "actions修改数据"
}
}
})
Utilizado dentro de los componentes
//组件内使用
<template>
<h1>{
{
mainStore.count }}</h1>
<h1>{
{
mainStore.info }}</h1>
<hr />
<h1>{
{
count }}</h1>
<h1>{
{
info }}</h1>
<h1>{
{
mainStore.count10 }}</h1>
<p>
<button @click="alertData">修改数据count</button>
</p>
</template>
<script lang="ts" setup>
import {
toRefs } from 'vue'
import {
storeToRefs } from 'pinia'
import {
useMainStore } from "../../store";
const mainStore = useMainStore();
// 解构数据,但是得到的数据是不具有响应式的,只是一次性的
// 相当于仅仅只是...mainStore而已,只是做了reactive处理,并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法:
// 1. 通过使用toRefs函数,因为前面所说相当于是通过reactive处理,因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决,推荐使用
const {
count, info } = storeToRefs(mainStore);
const alertData = () => {
// 方式四:通过 actions 来修改数据
mainStore.changeState()
mainStore.changeStates(10)
}
</script>
<style>
</style>