文章目录

创建组件
组件生命周期
组件之间的通讯方式
- 父给子组件传值
- 子给父组件传值
- 兄弟组件传值
uni-ui组件库的介绍和使用
- 日历组件使用
- uni_modules处理外部应用请求未能完成

创建组件

在 uni-app 中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，在通过components进行注册即可。我们来试一下：

我们在项目中新建 components 目录，同时在其中创建 test.vue 文件，这样一个组件就创造好了

我们在 index.vue 中使用它：

<template><view class="content"><test></test></view>
</template><script>import test from "@/components/test.vue"export default {components:{test}}
</script>

组件生命周期

组件生命周期官方文档

<script>export default {name:"test",data() {return {num:3};},beforeCreate() {console.log("beforeCreate","在实例初始化之前被调用")console.log(this.num)},created() {console.log("created","实例创建完成")console.log(this.num)}}
</script>

打印结果：

beforeCreate 在实例初始化之前被调用
undefined
created 实例创建完成
3

可以看到在 beforeCreate时，数据其实还没有初始化，所以打印结果是 undefined
create时，实例创建完成，所以打印出了结果 3

我们接着看：

<template><view id="myview">这是一个test组件</view>
</template><script>export default {......beforeMount() {console.log("beforeMount",document.getElementById('myview'))},mounted() {console.log("beforeMount",document.getElementById('myview'))}}
</script>

为了看效果，我们运行程序到浏览器，查看打印结果：

可以看到beforeMount时，组件还没有渲染到页面上
mounted时，组件就渲染到页面上了，所以在这个方法里操作 dom

beforeUpdate和updated仅H5平台支持，也就是在数据更新前后调用，这里不做演示

我们来演示 beforeDestroy 和 destroyed，首先修改 index.vue，使用一个变量来隐藏或显示 test 组件，然后增加一个按钮来改变这个变量的值

 <view class="content"><test v-if="flag"></test><button @click="changeFlag">点我切换组件显示</button></view>
</template><script>import test from "@/components/test.vue"export default {components:{test},data(){return{flag:true}},methods:{changeFlag(){this.flag = !this.flag}}}
</script><style>
</style>

然后在 test.vue 中打印这两个生命周期变化

     beforeDestroy() {console.log("beforeDestroy","组件销毁前")},destroyed() {console.log("destroyed","组件销毁了")}

来看下运行结果：

总结：
create可以在其中初始化一些数据
mounted可以在其中操作dom
destoryed可以来销毁定时器，可以这样写：

<script>export default {name:"test",data() {return {initId:null};},created() {this.initId = setInterval(()=>{console.log("执行定时器")},1000)},destroyed() {clearInterval(this.initId)}}
</script>

组件之间的通讯方式

单项数据流

父给子组件传值

我们继续在上边的 index.vue 中写，我们把一个值为 “Hello” 的变量 title 传给 test 组件。使用 :title=‘title’传递给 test 组件。其中第一个 :title 相当于 key，在 test 组件中接收时，就用相同的 key 接收，当然可以起别的名字，相应的 test 组件用对应的名字接收即可。这里为了规范，我们就使用 title。后边引号内的 title 是要传递的值

<template><view class="content"><test :title="title"></test></view>
</template><script>import test from "@/components/test.vue"export default {components:{test},data(){return{title:'Hello'}}}
</script>

在 test 组件内使用 props 接收

<template><view>这是一个test组件{{title}}</view>
</template><script>export default {name:"test",props:["title"]}
</script>

运行程序：

子给父组件传值

在 test.vue 中增加一个按钮，并添加点击事件，点击后使用this.$emit给父组件传值，第一个参数是自定义事件，这个需要在父组件增加对应方法。第二个参数就是要传过去的值

<template><view>......<button @click="sendNum">给父组件传值</button></view>
</template><script>export default {name:"test",data(){return{num:3}},methods:{sendNum(){this.$emit("myEvent",this.num)}},......}
</script>

在父组件 index.vue 中，使用子组件的地方注册子组件中的自定义事件@myEvent="getNum"，当子组件触发 myEvent 方法时，会调用父组件的 getNum 方法，在这个方法中，我们接收传过来的参数即可拿到子组件传的数据：

<template><view class="content"><test :title="title" @myEvent="getNum"></test>这是子组件传过来的num:{{num}}</view>
</template><script>import test from "@/components/test.vue"export default {components:{test},data(){return{......num:0}},methods:{getNum(num){this.num = num}}}
</script>

兄弟组件传值

页面通讯

思路是由 uni.$on来注册一个全局的自定义事件，然后由 uni.$emit 触发。我们新建 a.vue 和 b.vue，并在 index.vue 中使用

修改 index.vue

<template><view class="content"><test-a></test-a><test-b></test-b></view>
</template><script>import testA from "@/components/a.vue"import testB from "@/components/b.vue"export default {components:{"test-a":testA,"test-b":testB}}
</script>

我们希望通过 a 、b 组件间通讯，通过 a 修改 b 中的 num 值。所以我们在 b 组件中注册一个事件，当有人触发事件时，修改 b 中 num 的值，传的参数是多少 num 就 += 多少

<template><view>这是b组件:{{num}}</view>
</template><script>export default {name:"b",data() {return {num:0};},created() {uni.$on('updateNum',num=>{this.num+= num})}}
</script>

a.vue 中我们给 button 增加点击事件，通过uni.$emit调用在 b 组件中定义的方法 updateNum，并传入参数 10，所以每次点击按钮 b 中的 num 就增加 10

uni-ui组件库的介绍和使用

日历组件使用

扩展组件 uni-ui

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架

uni-ui不包括基础组件，它是基础组件的补充

我们来演示下使用日历组件，点击下载&安装跳转 uni-calendar 日历页面，点击使用 HBuilderX 导入插件按钮

如果刚才的页面登录了账号的话，会打开 HBuilder 的这个页面，选择我们的项目导入日历插件（如果没有打开这个页面，请看下一小节的错误解决）

这样根目录下会增加 uni-calendar 目录和文件

我们在 index.vue 中使用下，直接放入以下代码即可：

<uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change"/>

运行：

uni_modules处理外部应用请求未能完成

如果上一小节安装日历插件，HBuilder 有如下提示：

可以尝试打开工具——插件安装，找到 uni_modules 进行卸载

然后在安装新插件选项卡中，找到 uni_modules 重新安装即可

【uni-app从入门到实战】组件学习相关推荐

《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记腾讯课堂:米斯特吴视频讲座二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
《Angular4从入门到实战》学习笔记（图文）
<Angular4从入门到实战>学习笔记腾讯课堂:米斯特吴视频讲座二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
慕课网_《RabbitMQ消息中间件极速入门与实战》学习总结
慕课网<RabbitMQ消息中间件极速入门与实战>学习总结时间:2018年09月05日星期三说明:本文部分内容均来自慕课网.@慕课网:https://www.imooc.com 教学源 ...
android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
我的新书《Android App开发入门与实战》已经出版
文章目录 1. 前言 2. 写书的目的 3. 书籍简介 4. 书籍目标读者群体 5. 书籍比较 6. 书籍特色 7. 书籍章节 8. 书籍封面 9. 购书地址 10. 本书案例及源码下载 1. 前言 ...
《Go语言从入门到实战》学习笔记（1）——Go语言学习路线图、简介
非常有幸在<极客时间>上看到<Go语言从入门到实战>这门课程,本课程的作者给出了较为详细的学习路线图,具体如下: 学习路线图学习目的个人学习的目的主要是了解Go语言的基本 ...
python3数据科学入门与实战_Python3学习之Python3数据科学入门与实战视频教程
Python3学习之Python3数据科学入门与实战视频教程 Python3数据科学入门与实战这是一个数据驱动的时代,想要从事机器学习.人工智能.数据挖掘等前沿技术,都离不开数据跟踪,本课程通过Nu ...
《Python编程：从入门到实战》学习笔记(第2版) 第1-2章起步变量和简单数据类型
[写在前面]为进一步提高自己的python代码能力,打算把几本经典书籍重新过一遍,形成系统的知识体系,同时适当记录一些学习笔记,我尽量及时更新!先从经典的<Python编程:从入门到实战> ...
SCSS从入门到实战（学习笔记）
一.CSS预处理器出现的原因 1.无法嵌套书写代码繁重.冗杂.逻辑混乱. 2.没有变量和样式复用机制,属性值只能以字面量的形式重复输出. 总结:代码复用性低,不易于维护. 注:现在的CSS是可以定义变 ...
imooc《Python入门与实战》学习总结（七）Python中的面向对象
# 面向对象 # 类是现实世界或思维世界中的实体在计算机中的反映 # 行为的主体与特征 # ① 类 class 命名规则:首字母大写,尽量不用下划线,用驼峰方式 Student, UserStuden ...

【uni-app从入门到实战】组件学习