建立子组件（在components目录下）
<template>
<view>
<text @tap="godata">子组件</text>
<view>{{alldata.haha}}</view>
</view>
</template>
<script>
export default {
props: {
alldata: {
type: Object
}
},
methods:{
godata:function () {
let testdata = 123
this.$emit('getdata',testdata)
}
}
}
</script>
父组件使用
引入组件（其实跟vue组件的方式一样）
<script>
import testcom from '../../components/test.vue'（引入方式）
export default {
components: {（组件命名）
testcom,
},
data() {
return {
alldata:{
haha:"哈哈哈"
}
}
},
onLoad(ob) {
console.log(ob)
if (process.env.NODE_ENV === 'development') {（判断是否环境）
console.log('开发环境')
} else {
console.log('生产环境')
}
},
onPageScroll(ob) {（监听滚动条）
console.log(ob)
},
onTabItemTap(ob) {（监听底部菜单点击）
console.log(ob)
},
watch: {（监听路由，跟vue的方式一样）
$route(to, from) {
console.log(to);
}
},
methods: {
goScroll: function() {
console.log(123)
uni.pageScrollTo({（指定滚动条的位置）
scrollTop: 100,
duration: 300
})
},
getdata:function(data) {（获取子组件传值）
console.log(data)
}
}
}
</script>
<template>
<view>
123
<text @tap="goScroll">456</text>
<view class="bor">
<view class="testdiv"></view>
<view class="testdiv"></view>
<view class="testdiv"></view>
<view class="testdiv"></view>
<view class="testdiv"></view>
<view class="testdiv"></view>
</view>
<testcom :alldata="alldata" @getdata="getdata"></testcom>
</view>
</template>
网友评论