组件传参
父传子
1)在子组件内部通过props设置组件的自定义属性
props: ['abc', 'goods']
2)在父组件渲染子组件是对自定义属性赋值即可
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
示例代码:
子组件示例代码
<template>
<div class="goods-box">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
name: "GoodsBox",
// 在组件内部通过props定义组件的自定义属性
props: ['abc', 'goods'],
}
</script>
<style scoped>
.goods-box {
width: 260px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
margin: 20px;
float: left;
overflow: hidden;
text-align: center;
}
img {
width: 260px;
height: 260px;
}
</style>
父组件示例代码
<template>
<div class="goods">
<div class="main">
<!-- 在使用子组件是对自定义属性赋值即可 -->
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
let goods_list = [
{
img: require('@/assets/img/001.jpg'),
title: '小猫',
},
{
img: require('@/assets/img/002.jpg'),
title: '小猫儿',
},
{
img: require('@/assets/img/003.jpg'),
title: '小狗',
},
{
img: require('@/assets/img/004.jpg'),
title: '小狗儿',
},
];
export default {
name: "Goods",
data () {
return {
goods_list,
}
},
components: {
GoodsBox,
},
}
</script>
子传父
前提:子组件是被父组件渲染的,所以子组件渲染要晚于父组件。
1)在这个前提下,子组件一定要满足一个条件,才能对父组件进行传参(某个时间节点 === 某个被激活的方法)
eg: i)子组件刚刚加载成功,给父组件传参 ii)子组件某一个按钮被点击的时刻,给父组件传参 iii)子组件要被销毁了,给父组件传参
2)在子组件满足条件激活子组件的方法中,对父组件发生一个通知,并将数据携带处理(自定义组件事件)
<div class="goods-box" @click="boxClick"></div>
methods: {
boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
}
<!--例如此处,子组件被点击后,对父组件发送通知,receiveData是自定义的事件名字,后面的是传送的数据-->
3)在父组件渲染子组件时,为自定义事件绑定方法
<GoodsBox @receiveData="recFn"/>
4)在父组件实现绑定方法时,就可以拿到子组件传参的内容(接收到了通知并在父组件中响应)
recFn(title, data2, data3) {
console.log('接收到了' + title);
}
组件标签不能绑定系统定义的事件,没有意义,子组件的事件都是在自己内部完成
示例代码:
子组件示例代码
<template>
<div class="goods-box" @click="boxClick">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
props: ['abc', 'goods'],
methods: {
boxClick () {
// 通知父级 - 自定义组件的事件
this.$emit('receiveData', this.goods.title)
}
}
}
</script>
父组件示例代码
<template>
<div class="goods">
<div class="main">
<!-- 实现自定义事件,接收子组件通知的参数 -->
<GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
export default {
name: "Goods",
data () {
return {
goodsTitle: '哪个',
}
},
methods: {
recFn(title) {
console.log('接收到了' + title);
this.goodsTitle = title;
}
},
components: {
GoodsBox,
},
}
</script>
原文地址:https://www.cnblogs.com/cnhyk/p/12324757.html
时间: 2024-10-02 23:00:28