学习vue3 六，兄弟组件传参，provide/inject
Provide/Inject
通常父组件给子组件传递数据时，使用props的方式，如果是比较深得组件嵌套的话，就需要逐层的进行传递，这样的话，可能会比较麻烦
vue提过了一个api去简化这个操作
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。
祖先组件
<script setup lang="ts">// 采用provide的方式，将祖先组件数据传递给子组件
import { provide,ref } from 'vue'
import A from "./components/A.vue"
const count = ref(0)
provide('count',count)
</script><template><div><h1>{{count}}</h1></div><A></A>
</template><style scoped></style>
在需要用到这个ref数据的时候，只需要inject接受即可
也可以采用readonly防止数据被更改
provide('count',readonly(count))
后代组件
<script setup lang="ts">
import {inject} from "vue";
const data = inject('count')
</script><template><div class="container"><div><span>请输入：</span><input type="text" v-model="data"></div></div>
</template><style scoped>
.container {width: 500px;height: 500px;background-color: #ccc;border: 1px solid grey;margin: 0 auto;
}
.header {height: 50px;background-color: #eee;border: 1px solid grey;
}
.body {height: 400px;background-color: #ddd;border: 1px solid grey;
}
.footer {height: 50px;background-color: #eee;border: 1px solid grey;
}
</style>兄弟组件传参
有两种方式
1. 借助父组件传参
A组件提交一个事件用来传递参数，父组件接受这个事件拿到值，通过props的方式再转给B组件
案例：
父组件
<script setup lang="ts">
// 借助父组件，进行兄弟组件之间的通信
import A from './components/A.vue'
import B from './components/B.vue'
import {ref,Ref} from 'vue'
const title:Ref<string> = ref('hello')
const handleUpdate = (data:string):void => {title.value = data
}
</script><template><A @update="handleUpdate"></A><B :title="title"></B>
</template><style scoped></style>
A组件
<script setup lang="ts">
import { ref } from 'vue'
const data = ref('')
// let emit = defineEmits<{
// (e: 'update', value: string): void
// }>()
const emit = defineEmits(['update'])
</script><template><div class="container"><div><span>请输入：</span><input type="text" v-model="data"></div><button @click="emit('update', data)">提交</button></div>
</template><style scoped></style>B组件
<script setup lang="ts">
// 使用defineProps的js和ts写法
defineProps<{title: string
}>()
// const props = defineProps({
// title:{
// type:String,
// default:''
// }
// })
</script><template><div class="context"><h1>我是b组件</h1><div><span>{{title}}</span></div></div>
</template><style scoped></style>2. Event bus
在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用Mitt库（其实就是发布订阅模式的设计）
安装：
npm install mitt -S
使用：
再main.ts中
import { createApp } from 'vue'
import App from './App.vue'
import "animate.css"
import Card from "./components/Card.vue";
import mitt from 'mitt';
const emitter = mitt();declare module "vue" {export interface ComponentCustomProperties {$Bus: typeof emitter}
}const app = createApp(App)
app.config.globalProperties.$Bus = emitter; // 全局事件总线
app.component("Card",Card).mount('#app')
A组件通过emit派发事件
<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue'
const data = ref('')
const instance = getCurrentInstance()
function handleEmit() {instance?.proxy?.$Bus.emit('submit', data.value)
}
</script><template><div class="container"><div><span>请输入：</span><input type="text" v-model="data"></div><button @click="handleEmit">提交</button></div>
</template><style scoped>
.container {width: 500px;height: 500px;background-color: #ccc;border: 1px solid grey;margin: 0 auto;
}
.header {height: 50px;background-color: #eee;border: 1px solid grey;
}
.body {height: 400px;background-color: #ddd;border: 1px solid grey;
}
.footer {height: 50px;background-color: #eee;border: 1px solid grey;
}
</style>B组件通过on去接受
<script setup lang="ts">
// 使用defineProps的js和ts写法
import {ref,getCurrentInstance} from "vue";
const title = ref('我是b组件的title')
const instance = getCurrentInstance()
// 接受兄弟组件通过mitt传递过来的数据
instance?.proxy?.$Bus.on('submit',(val:string)=>{title.value = val
})
</script><template><div class="context"><h1>我是b组件</h1><div><span>{{title}}</span></div></div>
</template><style scoped>
.context {width: 500px;height: 300px;background-color: #ccc;border: 1px solid grey;margin: 0 auto;
}h1 {text-align: center;
}
</style>3使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有
也可以通过on('*')的方式监控所有组件