led网站模板,宁波租房网,家装设计图效果图大全,设计的网站源代码怎么做文章目录 组件通信方式props自定义事件全局事件总线v-modeluseAttrsref与$parentprovide与injectpiniaslot 组件通信方式
props
实现父子组件通信,在vue3中可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用#xff01;
父组… 文章目录 组件通信方式props自定义事件全局事件总线v-modeluseAttrsref与$parentprovide与injectpiniaslot 组件通信方式
props
实现父子组件通信,在vue3中可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用
父组件
templatedivchild info测试 :msgmsg/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
let msg Hello World!;/script子组件
props是只读的(只能读取不能修改)template中props可省略不写
templatediv子组件接受到的父组件的信息{{props.info}}{{msg}}/div
/templatescript setup langts
// 下面两种方式都可以
// let props defineProps([info,msg])
let props defineProps({info: {type: String,required: true,},msg: String
})
/script自定义事件
在vue框架中事件分为两种:一种是原生的DOM事件另外一种自定义事件。 原生dom事件 原生DOM事件可以让用户与网页进行交互比如click、dbclick、change、mouseenter、mouseleave… // 默认会给事件回调注入event事件对象
div clickhandler/div
// 当事件需要注入多个参数时候需获取event对象时需加入$event参数
div clickhandler(1,2,3,$event)我要传递多个参数/div自定义事件可以实现子组件给父组件传递数据。 在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。在vue2中组件标签需要通过native修饰符才能变为原生DOM事件 父组件定义函数绑定事件 templatedivchild logMsglogMsg clicklogMsg/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
const logMsg (msg: string) {console.log(msg);
};/script子组件内部触发 defineEmits方法是vue3提供的方法,不需要引入直接使用。defineEmits方法执行传递一个数组数组元素即为将来组件需要触发的自定义事件类型此方执行会返回一个 e m i t 方法用于触发自定义事件。当点击按钮的时候事件回调内部调用 emit方法用于触发自定义事件。当点击按钮的时候事件回调内部调用 emit方法用于触发自定义事件。当点击按钮的时候事件回调内部调用emit方法去触发自定义事件,第一个参数为触发事件类型第二个、三个、N个参数即为传递给父组件的数据。 templatedivbutton clickemits(logMsg, 我是参数1)点击/button/div
/templatescript setup langtslet emits defineEmits([logMsg]);
/script注意: 正常说组件标签书写click应该为原生DOM事件,但是如果子组件内部通过defineEmits定义就变为自定义事件
全局事件总线
全局事件总线可以实现任意组件通信在vue2中可以根据VM与VC关系推出全局事件总线。但是在vue3中没有Vue构造函数也就没有Vue.prototype.以及组合式API写法没有this
如果想在Vue3中使用全局事件总线功能
可以使用插件mitt实现。
mitt:官网地址:https://www.npmjs.com/package/mitt
v-model
v-model指令可是收集表单数据(数据双向绑定)除此之外它也可以实现父子组件数据同步。父组件 v-model:** 绑定值会在子组件props中接受到并存在一个 update:** 的自定义事件
父组件
templatedivchild v-model:msgmsg/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
import {ref} from vue;const msg ref(Hello World);
/script子组件
templatediv{{msg}}/divbutton clickemits(update:msg, 子组件)点击/button
/templatescript setup langtslet props defineProps({msg: {type: String,}
});
let emits defineEmits([update:msg]);
/scriptuseAttrs
在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中 a t t r s 属性与 attrs属性与 attrs属性与listeners方法。
父组件
templatedivchild v-model:msgmsg typesuccess sizesmall title标题/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
import {ref} from vue;const msg ref(Hello World);
/script子组件
可以通过useAttrs方法获取组件属性与事件类似于props,可以接受父组件传递过来的属性与属性值。需要注意如果defineProps接受了某一个属性useAttrs方法返回的对象身上就没有相应属性与属性值。
script setup langts
import {useAttrs} from vue;
let $attrs useAttrs();
/scriptref与$parent
ref可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC那么子组件内部的方法与响应式数据父组件可以使用的。
父组件
templatedivchild refchild/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
import {onMounted, ref} from vue;const child refChild();
const parentValue ref(父组件测试数据);defineExpose({parentValue
})onMounted(() {console.log(child.value.childValue);
})
/script但是需要注意如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”外部不能访问。
$parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例当然父组件的数据与方法需要通过defineExpose方法对外暴露。
templatediv{{childValue}}/divdivbutton clickhandler($parent)获取父组件实例/button/div
/templatescript setup langtsimport {ref} from vue;const childValue ref(测试);let handler (parent: any) {console.log(parent.parentValue);
}defineExpose({childValue
})
/script
provide与inject
vue3提供两个方法provide与inject,可以实现隔辈组件传递参数.provide方法用于提供数据此方法执需要传递两个参数,分别提供数据的key与提供数据value
父组件
script setup langts
import {provide} from vue
provide(token,admin_token);
/script后代组件
script setup langts
import {inject} from vue
let token inject(token);
/scriptpinia
pinia官网:https://pinia.web3doc.top/
pinia也是集中式管理状态容器,类似于vuex
slot
插槽默认插槽、具名插槽、作用域插槽可以实现父子组件通信. 默认插槽 父组件 templatedivchild refchild默认插槽内容/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
/script子组件 templatediv子1slot/子2/div
/templatescript setup langts
/script具名插槽 v-slot: 可以简写为 # 父组件 templatedivchild refchild默认插槽内容template v-slot:a具名插槽内容/template/child/div
/templatescript setup langtsimport Child from /views/demo/child.vue;
/script子组件 templatediv子1slot/子2slot name a//div
/templatescript setup langts
/script作用域插槽 子组件数据由父组件提供但是子组件内部决定不了自身结构与外观(样式) 父组件 templatedivh1slot/h1Child :todostodostemplate v-slot{$row,$index}!--父组件决定子组件的结构与外观--span :style{color:$row.done?green:red}{{$row.title}}/span/template/Child/div
/templatescript setup langts
import { ref } from vue;
import Child from /views/demo/child.vue;
//父组件内部数据
let todos ref([{ id: 1, title: 吃饭, done: true },{ id: 2, title: 睡觉, done: false },{ id: 3, title: 打豆豆, done: true },
]);
/script
style scoped
/style子组件 templatedivh1todo/h1ul!--组件内部遍历数组--li v-for(item,index) in todos :keyitem.id!--作用域插槽将数据回传给父组件--slot :$rowitem :$indexindex/slot/li/ul/div
/template
script setup langts
defineProps([todos]);//接受父组件传递过来的数据
/script
style scoped
/style
