网站可以叫做系统吗,建网站学什么,四川省微信网站建设,今天军事新闻最新消息详细前言#xff1a;如何实现组件的灵活使用#xff0c;今天学习组件封装用到的props、slot和emit。 目录
props
子组件
父组件
示例代码
slot
示例代码
作用域插槽
emit
示例代码 props
需要实现在其他组件中使用同一个子组件。
子组件
子组件#xff08;所谓子组件… 前言如何实现组件的灵活使用今天学习组件封装用到的props、slot和emit。 目录
props
子组件
父组件
示例代码
slot
示例代码
作用域插槽
emit
示例代码 props
需要实现在其他组件中使用同一个子组件。
子组件
子组件所谓子组件就是封装好的组件供其他组件使用
子组件定义了sonName
div我是MRJJ_9{{sonName}}/div
defineProps([sonName])
或 const propsdefineProps([sonName])
props是只读的尽量不要去修改
定义多个
const propsdefineProps([sonName1,sonName2])
但通常使用数组定义
const props defineProps({ sonName1: Object, sonName: Number,})
父组件
父组件所谓父组件就是引用封装好的其他子组件
Mrjj-Counter :sonNamesonName/Mrjj-Counter
let sonNameref(引用子组件)
示例代码
子组件设置
templatediv我是MRJJ_9的第一个属性类型为字符串内容是{{ sonName1 }},第二个属性类型是数字数值为{{ sonName2 }}/div
/template
script setup
const props defineProps({sonName1: String,sonName2: Number,
})
console.log(属性1,props.sonName1)
console.log(属性2,props.sonName2)
/script
style langscss scoped
/style
父组件设置
templatemrjj-son :sonName1sonName1 :sonName2sonName2/mrjj-son
/template
script setup
import MrjjSon from /components/MrjjSon.vue
import { ref } from vue
let sonName1 ref(hello,world!!!)
let sonName2 ref(999)
/script
style langscss scoped
/style 要注意不能去修改里面的值 slot
需要实现在其他组件中使用同一个组件子组件但组件样式的有所区别
这就需要用到插槽slot其作用是传参时可以带上HTML结构
子组件带上slot
{{ sonName }}slot/slot
父组件将需要传递的内容写到子组件标签里
mrjj-sonstrong{{sonName }}/strong/mrjj-son
具名插槽给插槽命名
有多个值时
子组件加上name
父组件用v-slot:插槽名或#插槽名
示例代码
子组件设置
templatediv{{ sonName1 }}slot namemrjj1/slot{{ sonName2 }}slot namemrjj2/slot/div
/template
script setup
const props defineProps({sonName1: String,sonName2: Number
})
/script
style langscss scoped
/style
父组件设置
templatemrjj-sontemplate #mrjj1strong{{ sonName1 }}/strong/templatetemplate #mrjj2i{{ sonName2 }}/i/template/mrjj-son
/template
script setup
import MrjjSon from /components/MrjjSon.vue
import { ref } from vue
let sonName1 ref(hello,world!!!)
let sonName2 ref(999)
/script
style langscss scoped
/style
效果展示 作用域插槽
子组件
templatediv{{ sonName3 }}slot namemrjj3 :timescount :mrjj1name/slot/div
/template
script setup
import { ref } from vueconst props defineProps({sonName3: String
})
let count ref(0)
let name ref(计数器)
/script
style langscss scoped
/style
父组件
template #mrjj3{ times }
templatemrjj-sontemplate #mrjj3{ times }i{{ sonName3 }}/iTimes :timestimes/Times/template/mrjj-son
/template
script setup
import MrjjSon from /components/MrjjSon.vue
import Times from /components/Times.vue
import { ref } from vue
let sonName3 ref()
/script
style langscss scoped
/style
引用的Time.vue文件
templateh1显示Mrjj{{ times }}/h1
/template
script setup
defineProps([times])
/script emit
需求增加一个关闭、打开的组件功能
用到emitemit干了什么事情呢在子组件中触发一个事件在父组件中进行监听。
示例代码
子组件定义一个自定义事件
templatediv{{ sonName1 }}slot namemrjj1/slot{{ sonName2 }}slot namemrjj2/slotbutton clickcloseSon点我关闭/button/div
/templatescript setup
const props defineProps({sonName1: String,sonName2: Number
})
const emit defineEmits([closeMrjj])function closeSon() {console.log(关闭按钮被点击了)emit(closeMrjj)
}
/script
style langscss scoped
/style
父组件绑定事件
templatemrjj-son closeMrjjcloseMrjj v-ifisClosetemplate #mrjj1strong{{ sonName1 }}/strong/templatetemplate #mrjj2i{{ sonName2 }}/i/template/mrjj-sonbutton v-else click($event) (isClose true)点我打开/button
/template
script setup
import MrjjSon from /components/MrjjSon.vue
import { ref } from vue
let sonName1 ref(hello,world!!!)
let sonName2 ref(999)
let isClose ref(false)
function closeMrjj() {isClose.value false
}
/script
style langscss scoped
/style
效果展示
点我关闭按钮点击后调用了closeSon函数可以看到console输出的信息。
点击展开后也可以展示出内容。
