1.父传子
在vue3中实现父子传值 可以使用vue3 Hooks中的defineProps
在标签中以数据绑定的形式声明要传的数据(也可以使用单标签)
父组件代码如下:
<template>
<div>
<Text :list="list"></Text>
</div>
</template>
<script setup lang="ts">
import Text from '@/components/Text.vue';
import { ref } from "vue";
let list = ref("这是父组件传的值")
</script>
<style scoped></style>
子组件中使用defineProps 接收
代码如下
<template>
<div>
这是子组件
{{ lists }}
</div>
</template>
<script setup lang="ts">
let list = defineProps(['list'])
let lists = list.list
</script>
<style scoped></style>
效果:
2.子传父
子组件给父组件传值使用的是defineEmits和defineProps差不多
通过emits 传递值
子组件代码:
<template>
<div>
这是子组件
{{ lists }}
</div>
</template>
<script setup lang="ts">
let list = defineProps(['list'])
let lists = list.list
let emits = defineEmits(["son"]);
emits("son","这是子组件给父组件传的值")
</script>
<style scoped></style>
父组件通过@name=“函数”接收 函数中的e就是传递过来的值
父组件代码:
<template>
<div>
<Text :list="list" @son="clikSon" />
</div>
</template>
<script setup lang="ts">
import Text from '@/components/Text.vue';
import { ref } from "vue";
let list = ref("这是父组件传的值")
const clikSon = (e: string) => {
console.log(e);
}
</script>
<style scoped></style>
3.refs
在vue3中可以通过refs传值
在组合式API中没有this所有this.$refs.name不行 需要通过defineExpose暴露属性或者方法
通过ref绑定子组件 .value.(需要或者的值)
父组件代码:
<template>
<div>
<Text ref="child" />
</div>
</template>
<script setup lang="ts">
import Text from '@/components/Text.vue';
import { ref, onMounted } from "vue";
let child = ref()
onMounted(() => {
console.log(child.value.date);
})
</script>
<style scoped></style>
子组件代码:
<template>
<div></div>
</template>
<script setup lang="ts">
import { ref } from "vue"
let date = ref("这是通过refs子组件给父组件传的值")
defineExpose({ date })
</script>
<style scoped></style>
效果:
4.pinia
pinia是一个拥有组合式 API 的 Vue 状态管理库
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
count: 1
},
getters: {
},
actions: {
}
})
第一个值为id是唯一的和vuex的命名空间类似
第二个值是一个对象放一些pinia的模块
然后用import引入 pinia 并调用
为了避免失去数据响应要使用pinia提供的storeToRefs
<template>
<div>
{{ count }}
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import useCounterStore from "@/stores/counter"
import { storeToRefs } from 'pinia'
let counter = useCounterStore();
const { count } = storeToRefs(counter)
console.log(count.value);
</script>
<style scoped></style>
pinia还提供了$patch(批量修改) $reset(重置)方法可以直接操作state
getters相当于vue中的计算属性getters本身不接受任何参数但是可以返回一个函数接受参数
代码:
import { defineStore } from 'pinia'
const useCounterStore = defineStore('counter', {
state: () => ({
count: 1
}),
getters: {
add(state) {
return state.count + 10
}
},
actions: {
}
})
export default useCounterStore
<template>
<div>
{{ count }}
{{ counter.add }}
<button @click="btn()">+++++</button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import useCounterStore from "@/stores/counter"
import { storeToRefs } from 'pinia'
let counter = useCounterStore();
const { count } = storeToRefs(counter)
console.log(count.value);
const btn = () => {
}
</script>
<style scoped></style>
actions相当于vuex中的 method 但他可以异步调用也可以同步调用
只能通过this调用state中的数据
在组件中和state调用方法差不多
代码:
import { defineStore } from 'pinia'
const useCounterStore = defineStore('counter', {
state: () => ({
count: 1
}),
getters: {
add(state) {
return state.count + 10
}
},
actions: {
adds() {
this.count++
}
}
})
export default useCounterStore
<template>
<div>
{{ count }}
{{ counter.add }}
<button @click="btn()">+++++</button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import useCounterStore from "@/stores/counter"
import { storeToRefs } from 'pinia'
let counter = useCounterStore();
const { count } = storeToRefs(counter)
console.log(count.value);
const btn = () => {
counter.adds()
}
</script>
<style scoped></style>
pinia也可以配置插件添加一个模块persist里面可以配置数据持久化等等