组件式开发

在开发小程序中，我没有接触过vue框架，所以理解组件式开发也比较困难，大家都说组件式开发是vue的核心，下面对组件式开发讲一下自己的看法也能加深理解.

首先我们需要明确一点，何为父组件，何为子组件。个人理解为，自定义的组件称为子组件，引用了子组件的页面称为父组件。

父向子传递数据

我们通过属性设置，在自定义标签中加上属性，实现父组件向子组件数据的传递

比如我们在父组件中引用子组件

这时候需要在子组件js文件的properties下进行外部数据的配置，如下

properties{

index:{

type:String,

value:’’

}

配置好后，相当于外部传进来的数据相当于全局的变量了，我们可以使用{{}}语法来读取外部传入的数据

子向父传递数据

子组件向父组件传递过程比较复杂，主要可分为以下几个部分

1.在父组件的js文件中创建一个事件

2.在子组件的标签中绑定上一个自定义事件，让子组件拿到自定义事件的引用

3.在子组件的js文件的函数的对应位置中，写上this.triggerEvent函数函数参数分别是，1-想要触发的自定义函数的名称，2-触发时想要从子组件中带给父组件的信息

4.父组件拿到子组件传递的信息，并做进一步的处理，通过e.detail实现

通过自定义事件的形式将父组件中的方法传递给子组件，子组件会触发自定义事件，接着把一些数据传送给父组件的自定义事件

以上这个过程可理解为父组件把钥匙借（自定义方法）给了子组件，子组件带着钥匙，并在外面逛了一会，买了一些水果（带给父组件的参数对象），通过钥匙（自定义方法找到了父组件）打开了门，并把水果（参数对象）带回了家，子组件把钥匙和水果（参数对象）还给父组件，父组件接过水果对水果（参数）进行了一些处理
。

【前端学习笔记】微信小程序vue 组件式开发相关推荐

搭建vue前端框架或微信小程序vue框架步骤
搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node.npm版本,确保环境正确 node --v ...
2020最新版前端学习路线图--微信小程序制作原来如此简单
黑马程序员前端学习路线图大纲中第六阶段的学习是微信小程序的学习:主要介绍了前端学习路线图中微信小程序的学习目标,前端学习路线图中微信小程序的市场价值,前端学习路线图中微信小程序的重点知识.前端学习路线 ...
微信小程序之组件的开发
跟着视频开始小程序的项目的开发,视频中这个小程序已经上线了,可以很好的看着小程序的界面进行开发,昨天看了一下具体的需求,觉得真的细节好多啊,而且其中设计的组件的思想也是很好的,能够很好的实现代码的复用 ...
图文并茂的学习笔记--微信小程序自定义tabbar
我发现自带的那个tabbar不可以修改样式,没得搞啊,这不行,要改首先,我们看文档,地址在下面 https://developers.weixin.qq.com/miniprogram/dev/fr ...
前端学习(2900):微信小程序简介
学习笔记--微信小程序简单设置背景颜色
1.设置导航栏以下的颜色在app.awsx添加 page {background-color: #ECC0A8; } 2.设置导航栏及以上的颜色在app.json修改"navigatio ...
5个受欢迎的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
5个微信小程序UI组件库
小程序UI组件库 WeUI WXSS iView WeApp Vant Weapp (原ZanUI WeApp) MinUi Wux WeApp 此文仅为便于自己查找原文链接:https://www ...
6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...

【前端学习笔记】微信小程序vue 组件式开发

组件式开发

父向子传递数据

子向父传递数据

【前端学习笔记】微信小程序vue 组件式开发相关推荐

最新文章

热门文章