uni-app组件的使用及父子组件传值
uni-app搭建了组件的插件市场,可大幅提升开发者的效率。https://ext.dcloud.net.cn/
组件的使用
在项目的/component目录下存放组件,在要显示组件的页面中则分为3步:导入、注册和使用。
<template> <view class="content"> <test></test>//三、使用组件(也可以写为</test>) </view> </template> <script> import test from "../../components/test.vue"//二、导入组件 export default { data() { return { } }, components:{ //一、局部注册组件 test } } </script> <style> </style>
uni-app只支持(.vue 组件)。其他的诸如:动态组件,自定义
render,和
<script type="text/x-template">字符串模版等,在非H5端不支持。
easycom【组件自动引入规则】(HBuilderX 2.5.5起支持easycom组件模式。)
1、传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
2、可在(插件市场)下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。
3、easycom是自动开启的,不需要手动开启,有需求时可以在pages.json的easycom节点进行个性化设置,
例:
<template> <view class="container"> <uni-list> <uni-list-item title="第一行"></uni-list-item> <uni-list-item title="第二行"></uni-list-item> </uni-list> </view> </template> <script> // 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用 export default { data() { return { } } } </script>
效果:(该组件的下载地址:https://ext.dcloud.net.cn/plugin?id=24)
自定义easycom配置的示例:
"easycom": { "autoscan": true,//autoscan是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件 "custom": { } }
注意:
- easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用
- easycom方式引入组件不是全局引入,而是局部引入。
- 在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)
- 考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。
- easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件
- nvue页面里的.vue后缀的组件,同样支持easycom
uni-app内置基础组件
uni-app 内置了小程序的所有组件
注意:原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如
bindchange="eventName"事件,需要写成
@change="eventName"
全局组件(nvue页面暂不支持全局组件)
uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。
例:
main.js 里进行全局导入和注册
import uniList from './components/uni-list/uni-list.vue' Vue.component('uni-list',uniList)//Vue.component 的第一个参数必须是静态的字符串
其他vue文件里可直接使用组件
<template> <view> <uni-list></uni-list> </view> </template>
父子组件传值
子类接收父类的数据,就会用到props
在子类props里定义接收参数:
父组件:
<template> <view class="phone"> <test :backGround="noticesList"></test>//传给子 </view> </template> <script> import test from '../../components/test.vue' export default { components:{ test }, data(){ return{ noticesList: "#000" //传递的参数 } } } </script>
子组件
<template> <view> <view class="con" :style="[{background:backGround}]"></view> </view> </template> <script> export default { //子类的props定义接收参数 props:{ backGround:{ //参数名 type:String, //定义传值的类型 default:'#f00' //参数默认 } } } </script> <style> .con{ width: 200rpx; height: 200rpx; } </style>
实现效果:
在子类props里定义接收参数:
在子类标签写上引用:
然后在父类写上准备传递的参数:
这样 子组件拿到父组件的背景颜色值,就会去覆盖默认的背景颜色
子组件给父组件传值($emit)
父组件:
<template> <view class="phone"> <!-- 在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法 --> <test @returnDat='returnDate'></test> </view> </template> <script> import test from '../../components/test.vue' export default { components:{ test }, methods:{ //定义接收方法 returnDate(val){ console.log("接收的值:"+val) } } } </script>
子组件:
<template> <view> <!-- //在子类写上触发事件 (当点击时传值给父)--> <button type="primary" @click="getValue">点击传值</button> </view> </template> <script> export default { //需要首先在子类组件定义事件 methods:{ getValue(){ this.$emit("returnDat","liyan")//传递的值 //returnDate接收的方法名 } } } </script>
1、需要在子类组件定义事件
2、在子类写上触发事件
3、在父类引用标签上写上在子类
$emit里面定义的方法名,以及接收方法
然后点击子类触发,就可以传值给父类:(可多次)
- 点赞
- 收藏
- 分享
- 文章举报
- Vue 使用Props属性实现父子组件的动态传值
- uniapp之scroll-view组件的练习使用 (制作可滑动的菜单)
- Vue 使用Props属性实现父子组件的动态传值详解
- 使用uni-app加vantweapp组件库开发app遇到的坑
- AppFramework1.0数据库访问组件使用说明(八)DAO类的使用
- vue.js基本使用 父子组件<三>
- AppFramework1.0数据库访问组件使用说明(六)QueryFilter的使用
- Android App开发中ViewPager组件的入门使用教程
- vue父子组件通讯--在组件内使用v-for
- 问卷调查的路由传值与父子组件通信
- Android的桌面组件App Widget的使用方法 AppWidgetProvider RemoteViews
- Top Android App使用的组件(三)
- React native从入门到深入 ---页面传值,父子组件传值
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
- Vue 中父子组件、兄弟组件通信(不使用Vuex)
- **Vue父子组件之间传值:*
- vue父子组件传值
- JavaScript ymPrompt弹窗组件 --父子窗口 获取值 使用实例
- 新闻类App使用的组件
- Top Android App使用的组件 3