- 創建模版
創建components文件夾,在其創建模版
<template>
<view>
<text>我是test組建{{msg}}</text>
<button type="primary" @click="test">event</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:["msg"],
methods:{
test(){
/**
* 回調父類的監聽
*/
// this.$emit("testShowName",{name:"zhang"})
/**
* 回調全局首頁的監聽
*/
uni.$emit("testEmit",{name:"li"});
uni.$emit("testOnce",{name:"一次"});
}
},
// 組件的生命週期,詳細看文檔
beforeCreate: () => {
console.log("beforeCreate");
},
created: () => {
console.log("created");
}
}
</script>
<style lang="less">
</style>
- 使用模版
<template>
<view class="content">
<!--
2.-》》》》》》公共組建使用
-->
<!-- 組建傳值和事件傳遞(組建調用父類) -->
<test :msg="msg" @testShowName="testEvevt"></test>
</view>
</template>
<script>
import test from "../../components/test.vue"
export default {
data() {
return {
msg: 'huangxiaoguo'
}
},
components: {
test
},
onLoad() {
/**
* 初始化註冊監聽,其他地方可以調用
*/
uni.$on("testEmit", (rel) => {
console.log(rel)
})
/**
* 調用一次,其他地方可以調用
*/
uni.$once("testOnce", (res) => {
console.log(res)
})
},
methods: {
testEvevt(rel) {
console.log(rel);
}
}
}
</script>
<style lang="less">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.box1 {
color: red;
}
.box2 {
color: #007AFF;
}
.box3{
color: #4CD964;
}
}
</style>