共计 1790 个字符,预计需要花费 5 分钟才能阅读完成。
形式一:props
props 是实现父组件向子组件传递信息,props 的数据是只读的。
应用实例:
父组件:
<script setup lang="ts">
// 导入子组件
import Child from './Child.vue'
import {ref} from 'vue';
const money = ref(1000);
</script>
<template>
<div class="box">
<h1> 我是父组件 </h1>
<hr />
<Child info="我是父组件参数" :money="money"></Child>
</div>
</template>
子组件:须要应用到 defineProps 办法去承受父组件传递过去的数据。
<script setup lang="ts">
//defineProps 是 Vue3 提供办法, 不须要引入间接应用
let props = defineProps(['info','money']); // 数组 | 对象写法都能够
</script>
<template>
<div class="box">
<h1> 我是子组件 </h1>
<div style="color: red;">{{info}}<p>{{money}}</p></div>
</div>
</template>
效果图:
形式二:emit
emit 形式是 Vue3 中最常见的组件通信形式,该形式用于子传父。
父组件中:
<template>
<h1> 我是父组件 </h1>
<p style="color: brown;">{{list}}</p>
<hr />
<!-- add 是子组件要传递的事件名称,handleAdd 是监听到之后执行的事件 -->
<Child @add="handleAdd"></Child>
</template>
<script setup lang="ts">
// 导入子组件
import Child from './Child.vue';import {ref} from 'vue';
const list = ref("");const handleAdd = (item: string) => {list.value = item;};
</script>
子组件中:
<script setup lang="ts">
const emits = defineEmits(['add']);
const handleBtn = () => {emits('add', '哈哈哈哈, 我是子组件参数');
}
</script>
<template>
<div class="box">
<h1> 我是子组件 </h1>
<button @click="handleBtn"> 点击我 </button>
</div>
</template>
成果视频:
办法三:pinia
Pinia 是一个专门为 Vue.js 设计的状态治理库,它提供了一种简略和直观的形式来管理应用程序的状态。在应用 Pinia 时,能够轻松地创立定义状态的存储,而后将其与 Vue 组件绑定,使它们可能应用该状态。与 Vuex 相比,Pinia 更加简略易用,体积更小,同时具备更好的 TypeScript 反对和插件零碎。
装置和配置 Pinia
yarn add pinia
# 或者应用 npm
npm install pinia
在装置完 Pinia 包之后,须要在 main.ts 文件中导入 createPinia 函数并将 Pinia 插件与 Vue 应用程序绑定,如下所示:
import {createApp} from 'vue';
import {createPinia} from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
应用 createPinia() 函数创立并初始化 Pinia 插件实例,将其与 Vue 应用程序绑定应用 app.use(pinia)。至此,咱们就能够应用 Pinia 来治理 Vue 应用程序的状态了。
在 src 下创立 stores 文件夹,而后在 stores 文件夹创立 counter.ts 文件,外面配置如下:
import {defineStore} from 'pinia'
export const useStore = defineStore('storeId', {state: () => {return {}
},
getters: { },
actions: {},})
正文完