wordpress增加网站网页关键词,重庆制作网站开发app开发公司,个人网页上传网站怎么做,网站数据库默认地址目录 一、defineEmits的使用
二、 defineProps的使用
总结 一、defineEmits的使用
使用说明 1、在子组件中调用defineEmits并定义要发射给父组件的方法
const emits defineEmits([foldChange])
2、使用defineEmits会返回一个方法#xff0c;使用一个变量emits(变量名随意…目录 一、defineEmits的使用
二、 defineProps的使用
总结 一、defineEmits的使用
使用说明 1、在子组件中调用defineEmits并定义要发射给父组件的方法
const emits defineEmits([foldChange])
2、使用defineEmits会返回一个方法使用一个变量emits(变量名随意)去接收
3、在子组件要触发的方法中调用emits并传入发射给父组件的方法以及参数 emits(foldChange, isFold.value) 1.子组件定义
templatediv classnav-headerel-icon size25 classfold-menu clickhandleFoldClickcomponent :is${isFold ? Fold : Expand}/component/el-icon!-- el-iconFold //el-icon --!-- Expand --/div
/templatescript setup langtsimport { ref, defineEmits } from vue// 定义发射给父组件的方法
const emits defineEmits([foldChange])const isFold ref(false)const handleFoldClick () {isFold.value !isFold.valueemits(foldChange, isFold.value)
}/script
2.父组件接收使用
templatediv classmainel-container classmain-contentel-aside :widthisCollapse ? 60px : 210pxnav-menu :collapseisCollapse/nav-menu/el-asideel-container classpageel-header classpage-headernav-header foldChangehandleFoldChange/nav-header/el-headerel-main classpage-contentMain/el-main/el-container/el-container/div
/templatescript langts setupimport NavMenu from /components/nav-menu
import NavHeader from /components/nav-header
import { ref } from vueconst isCollapse ref(false)const handleFoldChange (isFold: boolean) {isCollapse.value isFold
}/script 二、 defineProps的使用 使用说明 1、在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据 2、在子组件中通过defineProps API来进行接受 3、通过子组件事件修改变量值同时将值传递给父组件对父组件的变量进行赋值 4、向子组件传递非props的属性用法及效果如下 1.1 子组件定义 方式一
templateh3 v-bind$attrs字符串: {{props.str}}/h3h3数字: {{props.num}}/h3h3布尔: {{props.bool}}/h3h3数组: {{props.arr}}/h3h3对象: {{props.obj}}/h3h3日期: {{props.date}}/h3h3Symbol: {{props.a}} - {{props.b}}/h3
/template
script setupimport { defineProps } from vueconst props defineProps({str: String,num: Number,bool: Boolean,arr: Array,obj: Object,date: Date,getConsole: Function,message: Object,a: Symbol,b: Symbol})props.getConsole()
/script1.2 子组件定义 方式二
templatediv classshopListdiv classshopContent :class{tabActive: currentIndex index }v-for(tab, index) in tabBars :keyindexclickitemClick(index){{tab.name}}/div/div
/template
script setupimport { defineProps,ref,defineEmits } from vue// 接受父组件传递的数据const props defineProps({tabBar: {type: Array,default: () []}})// 定义属性const currentIndex ref(0)const tabBars JSON.parse(JSON.stringify(props.tabBar))// 定义发射给父组件的方法const emits defineEmits([tabClick])// tab点击的方法const itemClick (e) {currentIndex.value eemits(tabClick, currentIndex.value)}
/script
style langscss scoped
.shopList {display: flex;justify-content: center;align-items: center;.shopContent {flex: 1;text-align: center;padding: 20px;cursor: pointer;}.tabActive {border-bottom: 3px solid #bf0706;color: #bf0706;}
}
/style2、父组件使用
templateshowMessage:strstr:numnum:boolbool:arrarr:objobj:datedate:a a:bb:getConsolegetConsoleidabcclassbcd/showMessage
/template
script setup
import showMessage from ./ShowMessage.vue// 定义属性const str 吃饭、睡觉、敲代码const num 100const bool trueconst arr [apple, lemon, orange]const obj {name: coderXiao,age: 18}const date new Date()const a Symbol(好好学习)const b Symbol(天天向上)// 定义方法const getConsole () {console.log(传递给子组件的方法);}
/script
style langscss scoped/style总结
好记性不如烂笔头放了国庆八天假回来看着代码好陌生...
