vue组件的总结( 组件传值 )

最新推荐文章于 2022-09-27 00:29:11 发布

零零零jiawei

最新推荐文章于 2022-09-27 00:29:11 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/ljw_jiawei/article/details/80605601

vue 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了Vue.js中不同组件间的通信方式，包括组件给组件、组件给页面、页面给组件传值的具体实现方法，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子组件1:

<template>
<section class="checkbox-con">
<div class="checkbox">
<input type="checkbox" v-model="flag" @change="change">
<img src="../assets/img/small_icon/checked1.png" v-show="flag">
</div>
</section>
</template>
<script>
export default {
props: {
val: {
type: Boolean
},
index:{
type: String
}
},
data() {
return {
flag: this.val
}
},
computed: { //可以简称挂钩,_index这个data永远和this.index挂钩了
_index(){
return this.index
}
},
watch: {
val(newVal, old) {
return this.flag = !newVal;
}
},
methods: {
change() {
this.$emit('on-change');
}
}
}
</script>
<style lang="scss">
.checkbox-con {
.checkbox {
//自定义checkbox样式
width: .15rem;
height: .15rem;
border-radius: 50%;
overflow: hidden;
border: 1px solid #ccc;
position: relative;
input[type="checkbox"] {
width: .16rem;
height: .16rem;
position: absolute;
margin: 0;
z-index: 1;
opacity: 0;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
}
</style>

//调用页面的html:(on-change是自己写法方法)

例子组件2:

//暴露了两个事件在外面,在外面就能直接控制里面的参数来达到显示隐藏的效果
//this.$eventhub.$emit("shareshow",url) //第一个参数是组件里的方法,第二参数是传过去的参数
<template>
<section class="share_index">
<div class="share-popu" v-show="show" v-on:click="show=false">
<div class="inner">
<h1>你可以</h1>
<div class="con-text">
<p>1.请点击右上角将商品分享给指定朋友或分享到朋友圈</p>
</div>
<div class="con-text">
<p>2.邀请好友扫二维码：</p>
<VueQRCodeComponent align="center" :text="shareLink" :size="160" class="qrbox"></VueQRCodeComponent>
</div>
</div>
<div class="arrow">
<img src="../../assets/img/share_arrow.png" alt="">
</div>
</div>
</section>
</template>
<script>
import VueQRCodeComponent from 'vue-qrcode-component'
export default {
components: {
VueQRCodeComponent,
},
props: {

},
data() {
return {
shareLink: "",
show: false,
}
},
created(){
this.$eventhub.$on('sharehide', ()=>{
this.show = false;
});
this.$eventhub.$on('shareshow', (text)=>{
if (text)
this.shareLink=text;
this.show = true;
});
},
}
</script>
<style lang="scss">
.share_index {
.share-popu{
z-index: 9999;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: rgba(0,0,0,.6);
.inner{
width: 62%;
margin-left: .25rem;
margin-top: .65rem;
}
.arrow{
width: .71rem;
height: .71rem;
position: absolute;
top: .35rem;
right: .3rem;
img{
width: .71rem;
height: .71rem;
vertical-align: middle;
}
}
h1{
font-weight: 400;
font-size: .2rem;
color: #fff;
}
.con-text{
margin-top: .3rem;
p{
line-height: 1.5;
font-size: .13rem;
color: #fff;
}
.qrbox{
img{
margin-top: .1rem;
width: 1.66rem;
height: 1.66rem;
vertical-align: middle;
}
}
}
}
}