传值
- 向子组件中传值,在子组件props中定义要传递的值
props: {
text: ""
},
<TitleBarView text="你好"
事件回调
- emit后,第一个参数为定义的事件名,第二个参数为向外传出的参数
- 自定义一个事件
@click="$emit('clickEvent','Hello from child component!')"
@click="handleClick();"
methods:{
handleClick() {
this.$emit('clickEvent', 'Hello from child component!2')
}
}
<TitleBarView text="你好" @clickEvent="titleClick"/>
methods: {
titleClick(param){
console.log(param)
},
}
完整代码
<script>
import TitleBarView from "@/components/views/testing/chirld/TitleBarView.vue";
export default {
components: {TitleBarView},
methods: {
titleClick(param){
console.log(param)
},
}
}
</script>
<template>
<TitleBarView text="你好" @clickEvent="titleClick"/>
</template>
<style scoped lang="scss">
</style>
<template>
<div>
<div class="main-1">
<el-image class="image" @click="$emit('clickEvent')" :src="pub.getAssetsFile('icon_16_jiantou_zuo.webp')"></el-image>
<el-text class="title-1">{{ text }}</el-text>
</div>
</div>
</template>
<script>
import usePub from "@/utils/pub-use"
export default {
name: "TitleView",
props: {
text: ""
},
data() {
return {
pub: usePub,
}
}
}
</script>
<style scoped>
.main-1 {
display: flex;
flex-direction: row;
width: 100%;
height: 56px;
background: #FFFFFF;
box-shadow: 0 3px 6px 0 rgba(6, 40, 120, 0.12);
border-radius: 4px;
.image {
width: 20px;
height: 20px;
margin: auto 16px auto 16px;
}
.title-1 {
width: auto;
font-size: 20px;
font-weight: 500;
color: #062878;
line-height: 28px;
}
}
</style>