uni-app 组件使用方式

建立子组件(在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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,474评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,693评论 0 6
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,110评论 0 25
  • vue 2.0 渐进式框架 MVC 单向通信 > m:model 数据层 保存数据 > v:view视图层 用户界...
    web前端ling阅读 4,196评论 0 0
  • 因为过年很多早餐店都没营业,于是正月十二那天早晨,豆丁决定自己煎手抓饼吃,可是拔拔担心会影响上课出门时间,所...
    luckyvivi阅读 4,585评论 0 0

友情链接更多精彩内容