组件
类似于微信小程序的模板,微信小程序里叫templates
test.vue
<template>
<view>
这是tst组件
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>
在要是用的页面注册,import 和components
<script>
import test from '../../components/test.vue'
export default{
data () {
return {
}
},
components:{
test:test
}
}
</script>
在页面使用
<view>
<test></test>
</view>
跳转页面和传参
跳转到tabbar页面,注意不能传参
template
<button type="default" v-on:click="navi">跳转</button>
script
navi() {
uni.switchTab({
url: '../index/index?value=667'
})
}
t跳转到非tabbar页面并传参
由messaget跳转到detail
message的templates
<button type="default" v-on:click="navi2">跳转到非tabbar</button>
script,参数66666
navi2() {
uni.navigateTo
({
url: '../detail/detail/detail?value=666666'
})
}
detail页面接受参数,原理:onload函数的参数options就是上一个页面传的参数66666
onLoad(options) {
console.log(options)
},
组件通信
父组件(页面)发数据给子组件
(pages里的message.vue发给components里的test.vue),最后显示在message页面
meaasge.vue
<view>
<test :title='b'></test>
</view>
b是data里的变量
test.vue
<script>
export default {
data() {
return {
};
},
props:['title']
}
</script>
<view>
这是tst组件
这是父组件传来的数据{{title}}
</view>
子组件发给父
具体见教程p26
test.vue
methods:{
sendmun(){
this.$emit('myEven',this.num)
}
message.vue
<test @myEven=“getnum”>
同级组件传值()
test1,2两个components的组件传值,最终在页面体现
test1中的uni.on:
监听自定义事件。事件可以由 test2中的uni.#¥emit 触发(具体为点击按钮触发)。回调函数会接收 uni.#$emit 传递的参数。
test1
<template>
<view>
test1中的数据{{num}}
</view>
</template>
<script>
export default {
data() {
return {
num:0
};
},
methods:(){
},
created(){
uni.$on('updatenum',num=>{
this.num+=num
})
}
}
</script>
<style>
</style>
test2
<template>
<view>
<button type="default" v-on:click="addnum">修改test1中的数据</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
addnum(){
uni.$emit('updatenum',10)
}
}
}
</script>
<style>
</style>
页面
<test1></test1>
<test2></test2>
效果
小结
三者并列