vue3 defineProps的使用及案例
template>:a = "a":b="b"id="abc"// 定义属性const str = '吃饭、睡觉、敲代码'age: 18}const a = Symbol('好好学习')const b = Symbol('天天向上')// 定义方法console.log('传递给子组件的方法');}字符串: {{props.str}}
·
vue3 defineProps的使用
以下代码和内容的使用都是在vue3的setup中,未使用TS。
1、在父组件中定义
父组件:
<template>
<showMessage
:str="str"
:num="num"
:bool="bool"
:arr="arr"
:obj="obj"
:date="date"
:a = "a"
:b="b"
:getConsole="getConsole"
id="abc"
class="bcd"
></showMessage>
</template>
<script setup>
import showMessage from './ShowMessage.vue'
// 定义属性
const str = '吃饭、睡觉、敲代码'
const num = 100
const bool = true
const 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 lang="less" scoped>
</style>
子组件:
<template>
<h3 v-bind="$attrs">字符串: {{props.str}}</h3>
<h3>数字: {{props.num}}</h3>
<h3>布尔: {{props.bool}}</h3>
<h3>数组: {{props.arr}}</h3>
<h3>对象: {{props.obj}}</h3>
<h3>日期: {{props.date}}</h3>
<h3>Symbol: {{props.a}} - {{props.b}}</h3>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
str: String,
num: Number,
bool: Boolean,
arr: Array,
obj: Object,
date: Date,
getConsole: Function,
message: Object,
a: Symbol,
b: Symbol
})
props.getConsole()
</script>
页面渲染效果
2、使用说明
1、在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据
2、在子组件中通过defineProps API来进行接受
3、通过子组件事件修改变量值,同时将值传递给父组件,对父组件的变量进行赋值
4、向子组件传递非props的属性,用法及效果如下
### 3、案例
1、在父组件中定义tabBar并传递给子组件
2、子组件在页面进行渲染,并将点击的tab索引通过defineEmits发射给父组件
3、父组件接收子组件传递的数据,渲染tab对应的内容
父组件
```
子组件
<template>
<div class="shopList">
<div class="shopContent"
:class="{tabActive: currentIndex === index }"
v-for="(tab, index) in tabBars" :key="index"
@click="itemClick(index)">
{{tab.name}}
</div>
</div>
</template>
<script setup>
import { 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 = e
emits('tabClick', currentIndex.value)
}
</script>
<style lang="less" 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;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)