深圳做网站的网络公司,网站app软件下载安装,网页模版素材,seo辅助自定义组件 新建在/components/组件名.vue文件 组件文档结构 templateview....../view /template scriptexport default {name: 组件名称,//属性自定义props: {属性名称: {type: String, //属性类型value: 值templateview....../view /template scriptexport default {name: 组件名称,//属性自定义props: {属性名称: {type: String, //属性类型value: 值},......},//组件生命周期created: function(e) {},methods: {函数名称: function(obj) {},}} /script style组件样式 /style使用组件 1、引用组件 import 组件名称 from ../../components/组件名.vue; 2、注册组件 export default{components:{组件名称}, } 3、在试图模板中使用组件 组件名称 组件属性对应的值/组件名称全局注册 和vue一样的方式去配置全局组件需在main.js里进行全局注册注册后就可在所有页面里使用该组件。 1、main.js里进行全局导入和注册 import Vue from vue import pageCafe from ./components/page-cafe.vue Vue.component(page-cafe,pageCafe)2、index.vue里可直接使用组件 templateviewpage-cafe/page-cafe/view /template局部注册 1、传统vue规范在index.vue页面中通过import方式引入组件 在components选项中定义你想要使用的组件。 !-- 在index.vue引入 uni-badge 组件-- templateviewuni-badge text1/uni-badge/view /template scriptimport uniBadge from /components/uni-badge/uni-badge.vue;export default {components: {uniBadge}} /script对于components对象中的每个property来说其property名就是自定义元素的名字其property值就是这个组件的选项对象。 在对象中放一个类似uniBadge的变量名其实是缩写即这个变量名同时是 用在模板中的自定义元素的名称包含了这个组件选项的变量名(仅支持驼峰法命名) 2、通过uni-app的easycom将组件引入精简为一步。只要组件安装在项目的components目录下并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册直接在页面中使用。 templateviewuni-badge text1/uni-badge/view /template script// 这里不用import引入也不需要在components内注册uni-badge组件。template里就可以直接用export default {data() {return {}}} /scripteasycom是自动开启的不需要手动开启有需求时可以在pages.json的easycom节点进行个性化设置不管components目录下安装了多少组件easycom打包后会自动剔除没有使用的组件对组件库的使用尤为友好 props props可以是数组或对象用于接收来自父组件的数据。props可以是简单的数组或者使用对象作为替代对象允许配置高级选项如类型检测、自定义验证和设置默认值。 选项类型说明typeString、Number、Boolean、Array、Object、Date、Function、Symbol任何自定义构造函数、或上述内容组成的数组会检查一个 prop 是否是给定的类型否则抛出警告defaultany为该 prop 指定一个默认值。如果该 prop 没有被传入则换做用这个值。对象或数组的默认值必须从一个工厂函数返回requiredBoolean定义该 prop 是否是必填项validatorFunction自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下如果该函数返回一个 false 的值 (也就是验证失败)一个控制台警告将会被抛出 示例子组件定义 templateviewview{{age}}/view/view /template scriptexport default {props: {// 检测类型 其他验证age: {type: Number,default: 0,required: true,validator: function(value) {return value 0}}}} /script示例父组件传递age属性 template viewcomponentA :age10/componentA /view /template组件之间的数据传输 组件之间的数据传输以及事件传递是比较常见的一个应用 事件注册/触发方式 客户端调用组件的时候注册事件。组件触发注册的事件达到向父组件传值的目的 子组件free-cafe.vue template!-- button typedefault tap$emit(openExtend){{title}}/button --button typedefault taphandleJs{{title}}/button /templatescriptexport default {name: freeCa,props: {title: String,default: },methods: {handleJs() {this.$emit(openExtend, { name: cafe, sex: 男 })}}} /script 父组件调用时注册事件 templateviewfree-cafe :titletitle openExtendopenExtend/free-caafe/view /template scriptimport freeCafe from ../../components/free-cafe.vueexport default {components: {freeCafe},data() {return {title: haha}},methods: {openExtend(obj) {console.log(obj)}}} /script客户端调用组建引用方式 客户端为调用的组件设置引用别名就可以调用其方法进行传值 子组件free-cafe.vue templatebutton typedefault{{title}}/button /templatescriptexport default {name: freeTs,props: {title: String,default: },methods: {seeme(obj) {console.log(obj)}}} /script父组件为组建设置引用别名就可以调用其方法进行传值 templateviewfree-cafe :titletitle reffree/free-testbutton typedefault tapseeDatatest/button/view /template scriptimport freeCafe from ../../components/free-cafe.vueexport default {components: {freeCafe},data() {return {title: haha}},methods: {seeData() {this.$refs.free.seeme({ title: 6666, created_at: 2020-09-19 });}}} /scriptref 被用来给元素或子组件注册引用信息引用信息将会注册在父组件的$refs对象上。 如果在普通的 DOM 元素上使用引用指向的就是 DOM 元素如果用在子组件上引用就指向组件实例 !-- 非H5端不支持通过this.$refs.content来获取view实例 -- view refcontenthello/view!-- 支持通过this.$refs.child来获取child-component实例 -- child-component refchild/child-component尽管存在prop和事件有的时候你仍可能需要在JavaScript里直接访问一个子组件。访问子组件实例或子元素通过ref为子组件赋予一个ID引用在vue的js中可通过this.$refs.XXX来获取到组件对象。 base-input refusernameInput/base-input你已经定义了这个ref的组件里你可以使用this.$refs.usernameInput来访问这个实例 !-- base-input子组件页面 -- templateviewinput :focusisFocus typetext placeholder请输入内容 //view /template scriptexport default {name: base-input,data() {return {isFocus: false};},methods: {focus() {this.isFocus true}}} /script允许父级组件通过下面的代码聚焦里的输入框 !-- index 父组件页面 -- templateviewbase-input refusernameInput/base-inputbutton typedefault clickgetFocus获取焦点/button/view /template scriptexport default {methods: {getFocus() {// 通过组件定义的ref调用focus方法this.$refs.usernameInput.focus()}}} /script注意 非H5端只能用于获取自定义组件不能用于获取内置组件实例如view、text 自定义事件 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。 这时你可以使用 事件的.native修饰符 注意在app、小程序端和h5端表现不一致h5端获取到的是浏览器原生事件。 templateview!-- 我是父组件 --componentA click.nativeclickComponentA styleheight: 200px;/componentA/view /template scriptexport default {methods: {clickComponentA() {console.log(clickComponentA);}}} /scripttemplateview!-- 我是子组件 --view typedefault click.stopopen styleheight: 30px;点击/view/view /template scriptexport default {methods: {open() {console.log(open);}}} /script.sync 修饰符 当一个子组件改变了一个prop的值时这个变化也会同步到父组件中所绑定。.sync它会被扩展为一个自动更新父组件属性的v-on监听器。 !-- 父组件 -- templateviewsyncA :title.synctitle/syncA/view /template scriptexport default {data() {return {title: hello vue.js}}} /script!-- 子组件 -- templateviewview clickchangeTitle{{title}}/view/view /template scriptexport default {props: {title: {default: hello},},methods: {changeTitle() {// 触发一个更新事件this.$emit(update:title, cafe-app)}}} /script命名限制 在uni-app中以下这些作为保留关键字不可作为组件名。 a、canvas、cell、content、countdown、datepicker、div、element、embed、header、image、img、indicator、input、link、list、loading-indicator、loading、marquee、meta、refresh、richtext、script、scrollable、scroller、select、slider-neighbor、slider、slot、span、spinner、style、svg、switch、tabbar、tabheader、template、text、textarea、timepicker、transition-group、transition、video、view、web 注意 除以上列表中的名称外标准的 HTML 及 SVG 标签名也不能作为组件名。 在百度小程序中使用时不要在 data 内使用 hidden 可能会导致渲染错误。 methods中不可使用与生命周期同名的方法名。