所属分类:web前端开发
前端(vue)入门到精通课程,老师在线辅导:联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
⭐⭐
这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props
来完成组件之间的通信
通过props来完成组件之间的通信
⭐⭐
那么什么是Props
呢?
Props
是你可以在组件上注册一些自定义的attribute(属性);在使用 script setup
的单文件组件中,props
可以使用 defineProps()
宏来声明:
<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>
登录后复制
1)数组类型
在没有使用 script setup
的组件中,prop
可以使用 props
选项来声明:
export default {
props: ['foo'],
setup(props) {
// setup() 接收 props 作为第一个参数
console.log(props.foo)
}
}
登录后复制
例子,对象语法的使用
App.vue
里面使用组件,属性整数props所定义的
<template>
<show-info name="kk" age="18" height="1.7" />
</template>
登录后复制
showInfo.vue
子组件
export default {
props:{
name :{
type:String,
default:"我是默认值name"
},
height:{
type:Number,
default:2
}
}
}
登录后复制
另外:
那么type的类型都可以是哪些呢?
2)对象类型
用对象
的形式声明props
(这个还挺常用的)
使用 script setup
defineProps({
title: String,
likes: Number
})
登录后复制
非 script setup
export default {
props: {
title: String,
likes: Number
}
}
登录后复制
⭐⭐
子组件传递给父组件通过$emit触发事件
子组件传递内容到父组件:
$emit(“add”, count)
第一个参数自定义的事件名称,第二个参数是传递的参数
⭐⭐
举一个计数器案例
1)父组件App.vue
<template>
<div class="app">
<h2>当前计数:{{counter}}</h2>
<!-- 1.自定义add-counter 并且监听内部的add事件 -->
<add-counter @add="addBtnClick"></add-counter>
<!-- 2.自定义su-counter组件,监听内部的sub事件 -->
<sub-counter @sub="subBtnClick"></sub-counter>
</div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
export default {
components: {
AddCounter,
SubCounter
},
data() {
return {
counter:0
}
},
methods:{
addBtnClick(count) {
this.counter += count
},
subBtnClick(count) {
this.counter -= count
}
}
}
</script>
登录后复制
2)子组件1AddCounter.vue
这里定义的是计数器的加操作
子组件事件触发之后,通过this.$emit的方式进行发出事件
<template>
<div class="add">
<button @click="btnClick(1)">+1</button>
<button @click="btnClick(5)">+5</button>
<button @click="btnClick(10)">+10</button>
</div>
</template>
<script>
export default {
methods:{
btnClick(count) {
// 让子组件发出去一个自定义事件
// 第一个参数自定义的事件名称,第二个参数是传递的参数
this.$emit("add",count)
}
}
}
</script>
登录后复制
3)子组件2SubCounter.vue
这里定义的是计数器的减操作
子组件事件触发之后,通过this.$emit
的方式进行发出事件
<template>
<div class="sub">
<button @click="btnClick(1)">-1</button>
<button @click="btnClick(5)">-5</button>
<button @click="btnClick(10)">-10</button>
</div>
</template>
<script>
export default {
// 1.emits数组语法
emits:["addd"],
methods:{
btnClick(count) {
this.$emit("sub",count)
}
}
}
</script>
登录后复制
这个案例非常经典,可以反复琢磨一下~
(学习视频分享:编程基础视频)
以上就是浅析Vue中父子组件间怎么通信(父传子|子传父)的详细内容,更多请关注zzsucai.com其它相关文章!