一 点睛
组件间传值包括下面三种情况：
-
父组件给子组件传值
-
子组件给父组件传值
-
兄弟组件通讯
二 代码
1 父组件 index.vue
<template>
<view class="content">
<!-- 1 父组件给子组件传值——设参 -->
<!-- 3 子给父传参 -->
<test v-if="flag" :title="title" @myEvent="getNum"></test>
<button type="primary" @click="checkTest">切换test组件</button>
这是子组件传递过来的数据{
{num}}
<testA></testA>
<testB></testB>
</view>
</template>
<script>
/* 引入组件 */
import test from '../../components/test.vue'
import testA from '../../components/a.vue'
import testB from '../../components/b.vue'
export default {
data() {
return {
title: 'Hello',
flag: true,
num:0
}
},
onLoad() {
console.log('页面加载了')
},
onShow() {
console.log('页面显示了')
},
onReady() {
console.log('页面初次渲染完成了')
},
onHide() {
console.log('页面隐藏了')
},
methods: {
checkTest() {
this.flag = !this.flag
},
// 4 子给父传参
getNum(num){
this.num = num
console.log(num)
}
},
// 组件组件
components: {
test: test,
testA:testA,
testB:testB
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
2 子组件 test.vue
<template>
<view id="myview">
这是test组件{
{num}}
<!-- 3 父项子传值-用参 -->
这是父组件传递过来的数据{
{title}}
<!-- 1 子给父传值 -->
<button @click="sendNum">给父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
num: 3,
intId: null
};
},
// 2 父给子传值-接参
props:['title'],
methods:{
sendNum(){
console.log('给父亲传值')
// 2 子给父传值
this.$emit('myEvent',this.num)
}
},
beforeCreate() {
console.log('实例已经开始初始化了,但数据还没初始化完成，页面也没开始渲染')
console.log(this.num)
},
created() {
// 在这个里面初始化数据
console.log('实例创建完成后被立即调用')
console.log(this.num)
// this.intId = setInterval(() => {
// console.log('执行定时器')
// }, 1000)
},
beforeMount() {
console.log('在挂载开始前被调用', document.getElementById('myview'))
},
mounted() {
// 在这个里面操作dom
console.log('挂载已完成', document.getElementById('myview'))
},
destroyed() {
console.log('组件销毁了')
// 清空定时器
clearInterval(this.intId)
}
}
</script>
<style>
</style>
3 兄弟组件 a.vue
<template>
<view>
这是a组件
<!-- 1 兄弟组件传值 -->
<button @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
addNum(){
// 2 兄弟组件传值
uni.$emit('updateNum',10)
}
}
}
</script>
<style>
</style>
4 兄弟组件 b.vue
<template>
<view>
<!-- 4 兄弟组件传值 -->
这是b组件的数据：{
{num}}
</view>
</template>
<script>
export default {
data() {
return {
num: 0
};
},
created() {
// 兄弟组件传值
uni.$on('updateNum', num => {
this.num += num
})
}
}
</script>
<style>
</style>
三 效果
