Footer:
<template>
<view>
<!--component/Footer/Footer.wxml-->
{{length1}}|
{{length2}}
</view>
</template>
<script>
export default {
data() {
return {};
},
components: {},
props: {
length1: Boolean,
length2: Boolean
},
methods: {}
};
</script>
Page:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
页面的值:
<view class="text-area">
<text class="title">{{(list1.length>0)}}|{{(list2.length>0)}}</text>
</view>
<div>组件内的值: <Footer :length1="(list1.length>0)" :length2="(list2.length>0)"></Footer>
</div>
<button @click="tapAdd">改变值</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
i: 0,
list1: null,
list2: []
}
},
onLoad() {
},
methods: {
tapAdd() {
this.i++;
if (this.i == 1) {
this.list1 = [];
}
if (this.i == 2) {
this.list1.push({});
}
if (this.i == 3) {
this.list1 = [{}];
}
this.list2.push({});
}
}
}
</script>
如代码示例。组件Footer中有两个prop,length1和length2,组件中直接显示。赋值时使用判断表达式(list1.length>0)。页面中直接输出表达式的值作为对比。