组件传值
一. 父组件向子组件传值
通过props来实现, 子组件通过props来接收父组件传过来的值
1 父组件
// 1. 引入子组件
import Tab from '@/components/tab/tab.vue'
// 2. 在components中对子组件进行注册
export default {
components:{
Tab
}
图示
2子组件
//1.通过props接收父组件中传过来的值
props:['list'],
在标签中显示
最终效果
二. 子组件向父组件传值
子组件通过事件来向父组件传值
1 子组件
<template>
<view @click="send">
点击传值
</view>
</template>
<script>
export default{
methods:{
//点击事件
send: function(){
//向父组件传值
this.$emit("sendData", "我是子")
}
}
}
</script>
2 父组件
<template>
<view>
<zi @sendData="getData"></zi>
</view>
</template>
<script>
//1.导入子组件
import zi from '../../components/zi.vue';
//2.注册子组件
export dufault {
components: {
zi
},
methods: {
getData: function(res){
console.log(res) //我是子
}
}
}
</script>
参考链接https://blog.csdn.net/weixin_43167546/article/details/107362671