uniApp自定义组件

自定义组件代码

<template name="myInput">
    <view>
        <input type="text" value="" :placeholder="placeholder" class="myInput" />
        <button type="primary" @click="submit">提交</button>
    </view>
</template>

<script>
    export default {
        name:"myInput",
        //属性
        // props:{
        //  属性名称:{
        //      type:String,    //属性类型
        //      value:"值"
        //  }
        // },
        // props:["msg"],
        props:{
            msg:{
                type:String,
                default:"真好"   //不传值时使用属性默认值
            },
            placeholder:{
                type:String,
                value:"请输入您的..."
            }
        },
        
        //组件生命周期
        created() {
            
        },
        data() {
            return {
                
            }
        },
        methods: {
            submit(){
                this.$emit("mytest",'来自子组件的问候')
            }
        }
    }
</script>

<style>
    .myInput{
        padding: 20upx;
        background: #eee;
    }
</style>

语法,传参,事件跟VUE一致 ,请参数vue的写法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,533评论 0 13
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 748评论 0 0
  • Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angularJS霸占...
    6e5e50574d74阅读 559评论 0 0
  • 2019.4.9 星期二 晴 (基础写作课感想)有约才有定,否则便会生出“有约不来...
    几川阅读 162评论 0 5
  • 从明天起,做一个幸福的人, 不给关系不太好的人点赞,投票,砍价,浪费情感评论。 从明天起,关心亲人和大自然 我有一...
    茵菓阅读 172评论 0 0