vue组件通信小结 pinia

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里面可以配置数据持久化等等