Vue组件通信

组件通信

父子双传

props

父传子

子传父

v-model（双向绑定）

表单

//用在html标签
<input type="text" v-model="username">

//用在组件标签上
<组件 v-model="username"/>

父传子

$refs

改变子的玩具

让所有子的书变多

默认插槽

具名插槽

子传父

自定义

父组件

<Child @send-toy="toy = $event"/>

子组件

this.$emit('send-toy', 具体数据)

$parent

减少父的房产

作用域插槽

params 作为对象

祖传孙

$attrs

provide（配 inject）

孙传组

inject（配 provid）

兄弟传

mitt

安装

npm i mitt

/utils/emitter

//引入mitt
import mitt from 'mitt'

// 调用mitt得到emitter，emitter能：绑定事件、触发事件
const emitter = mitt()

// 暴露emitter
export default emitter

//绑定事件
emitter.on('text',()=>{})
//触发事件
emmiter.emit('text')
//解绑事件
emmiter.off('text')
//全部解绑
emmiter.all.clear()

任意传

pinia

搭建

npm install pinia

main.ts

import { createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'

/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

/stores/first.ts

import {defineStore} from "pinia";

import {ref} from "vue"

export default defineStore('first',()=>{//创建自己的仓库
    const name = ref('pinia');

    return {name};
})

App.vue

<script>
    import useFristStore from "./stores/first"
    const store = useFirstStore();//自己的仓库
    console.log(store.name);
</script>
<template>

</template>