Vue3复习和总结(Component)组件间四种数据传递的方式与插槽,props、emit、ref

2024-06-12 01:14| 来源: 网络整理| 查看: 265

Vue3复习和总结(Component)组件间四种数据传递的方式与插槽与祖孙组件间通信,props、emit、ref,Provide / Inject

代码全部放在->github仓库：https://github.com/zyugat/vue-review-all

前言：分为base、Component、router、Vuex、组合式API。5各部分。

base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli

组件间四种数据传递的方式与插槽 Vue3复习和总结(Component)组件间四种数据传递的方式与插槽与祖孙组件间通信,props、emit、ref,Provide / Inject props 字符串数组对象 emit refs 祖孙组件通信Provide / Inject 插槽具名插槽作用域插槽

props 字符串数组

父传子→props

props两种实现：一种是以字符串数组，一种是以对象实现。

1、父组件传入:chello="hello"属性

2、子组件声明接收props: ['chello']

{ chello }}--> const App = { data() { return { hello: 'Hello', } } } const app = Vue.createApp(App) app.component('cpn', { // template: '#cpn', template: ` { { chello }} `, // 创建props props: ['chello'], }) app.mount('#app')

对象 props: { // 1.类型限制 // cmessage: Array, // chello: String, // 2.提供一些默认值, 以及必传值 chello: { type: String, default: 'aaaaaaaa', required: true }, // 类型是对象或者数组时, 默认值必须是一个函数 cmessage: { type: Array, default () { return [] } } }, emit 子传父→$emit

第一步：子组件创建事件。第二步：按钮监听子组件事件。最后一步：获取信息。

更多扩展看下面->自定义事件与v-model

【本文地址】

公司简介

联系我们