uniapp props、$ref、$emit，如何保证高可用
},
mounted() {
},
methods: {
}
}
</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. onA 组件
<template>
<view>
<button type="primary" @click="onSend">传值给 onB 组件</button>
</view>
</template>
<script>
import bridge from '@/utils/bridge.js';
export default {
data() {
return {
msg: 'hello,onB'
};
},
methods: {
onSend() {
bridge.$emit('receiveA', this.msg);
}
},
mounted() {
bridge.$on('receiveB', (val) => {
console.log('我是 onA 组件，接收来自 onB 的值：', val);
});
}
}
</script>
<style>
</style>
3.onB 组件
<template>
<view>
<button type="primary" @click="onSend">传值给 onA 组件</button>
</view>
</template>
<script>
import bridge from '@/utils/bridge.js';
export default {
data() {
return {
msg: 'hello,onA'
};
},
methods: {
onSend() {
bridge.$emit('receiveB', this.msg);
}
},
mounted() {
bridge.$on('receiveA', (val) => {
console.log('我是 onB 组件，接收来自 onA 的值：', val);
});
}
}
</script>
<style>
</style>
五、$parent（用于子组件获取父组件实例） -?当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己
六、$child -?当前实例的直接子组件。需要注意?$children?并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用?$children?来进行数据绑定，考虑使用一个数组配合?v-for?来生成子组件，并且使用 Array 作为真正的来源
<template>
<view class="content">
<view style="padding: 12px 15px;">
点击 hover 效果
</view>
<onA></onA>
<onB></onB>
</view>
</template>
<script>
import onA from '@/components/onA.vue';
import onB from '@/components/onB.vue';
export default {
data() {
return {
title: 'Hello'
}
},
components: {
onA,
onB
},
onLoad() {
},
mounted() {
console.log(this.children[0].$children[0]._data);
console.log(this.children[0].$children[1]._data.msg);
console.log(this.children[0].$children[2]._data.msg);
},
methods: {
}
}
</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>
七、$set -?在开发过程中，我们时常会遇到这样一种情况：当 vue 的 data 里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的
1.运行这个示例时，我们发现对象新增的属性(e)是不会更新的
<tem
plate>
<view>
<view @click="addd(obj)">点击增加 1：{{obj.d}}</view>
<view @click="adde(obj)">点击增加 2：{{obj.e}}</view>
</view>
</template>
<script>
export default {
data() {
return {
obj: {}
}
},
mounted() {
// 原有的
this.obj = {
d: 0
};
// 新增的对象.e
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论