父组件给子组件传值
- 父组件绑定data里面的属性 v-bind绑定 放置test组件中
- test组件,下面props接收,然后view里面 然后 这是父组件传递过来的数据{{title}} 显示
<template>
<view id="myView">
这是test组件{{num}}
这是父组件传递过来的数据{{title}}
</view>
</template>
<script>
export default {
name:"test",
data() {
return {
num: 3,
intId: null
};
},
props:['title'],
// 实例初始化,但是此时数据并没有初始化
beforeCreate(){
console.log("实例已经初始化了")
console.log(this.num)
},
// 此时数据初始化,通常在这里面显示一些数据,初始化数据在这里面
created(){
console.log('created',this.num)
// 设置一个定时器,时间为一秒
this.intId= setInterval(()=>{
console.log('执行定时器')
},1000)
},
beforeMount() {
console.log('beforemount',document.getElementById('myView'))
},
// 操作Dom元素,推荐在这里面操作
// 挂在需要id,根据id获取Dom元素
mounted() {
console.log('beforemount',document.getElementById('myView'))
},
destroyed() {
console.log("组件销毁了")
// 通过变量销毁定时器
clearInterval(this.intId)
}
}
</script>
<style>
</style>
子组件给父组件传值
通过$emit触发事件进行传递参数
<template>
<view id="myView">
这是test组件{{num}}
这是父组件传递过来的数据{{title}}
<button @click="sendNum">给父组件传值</button>
</view>
</template>
<script>
export default {
name:"test",
data() {
return {
num: 3,
intId: null
};
},
props:['title'],
// 实例初始化,但是此时数据并没有初始化
beforeCreate(){
console.log("实例已经初始化了")
console.log(this.num)
},
// 此时数据初始化,通常在这里面显示一些数据,初始化数据在这里面
created(){
console.log('created',this.num)
// 设置一个定时器,时间为一秒
// this.intId= setInterval(()=>{
// console.log('执行定时器')
// },1000)
},
beforeMount() {
// console.log('beforemount',document.getElementById('myView'))
},
// 操作Dom元素,推荐在这里面操作
// 挂在需要id,根据id获取Dom元素
mounted() {
// console.log('beforemount',document.getElementById('myView'))
},
destroyed() {
console.log("组件销毁了")
// 通过变量销毁定时器
clearInterval(this.intId)
},
methods:{
sendNum(){
console.log('给父亲传值')
this.$emit('myEven',this.num)
}
}
}
</script>
<style>
</style>
- 首先子组件定义一个button按钮,写一个@click事件,事件里面this.$emit(‘myEven’,this.num)
- 在父组件里面的view的子组件里面@myEven=“getNum”,传递的值赋给当前的组件
兄弟组件之间的通信
- 首先uni.on注册一个事件,然后在另一个组件里面uni.$emit实现整个方式
注意:在Created里面写uni. o n , 在 m e t h o d s 里 面 写 u n i . on,在methods里面写uni. on,在methods里面写uni.emit
- a组件
<template>
<view>
这是a组件:<button @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
name:"a",
data() {
return {
};
},
methods:{
addNum(){
uni.$emit('updateNum',10)
}
}
}
</script>
<style>
</style>
- b组件
<template>
<view>
这是b组件的数据:{{num}}
</view>
</template>
<script>
export default {
name:"b",
data() {
return {
num:0
};
},
created() {
uni.$on("updateNum",num =>{
this.num+=num;
}
)
}
}
</script>
<style>
</style>
- index.vue (显示用的)
<template>
<view class="content">
<!-- v-if 来判断显示还是不显示 -->
<test v-if="flag" :title="title" @myEven="getNum"></test>
<button type="primary" @click="checkTest">切换方法</button>
这是子组件传递过来的数据{{num}}
<test-a></test-a>
<test-b></test-b>
</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(options) {
console.log("页面加载了",options)
},
onShow(){
console.log('页面显示了')
},
onReady(){
console.log('页面初次渲染完成了')
},
onHide(){
console.log("页面隐藏了")
},
methods: {
checkTest(){
this.flag= !this.flag;
},
getNum(num){
console.log(num)
this.num = num
}
},
// 注册组件
components:{
test,
"test-a": testa,
"test-b": 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>