uniapp自定义组件

1、先创建一个测试组件:

创建component目录,新建test.vue文件,定义一个组件:

这个组件中,我们实现以下功能:

①父vue文件中传递属性参数,改变msg的值

②父vue文件中调用子组件的函数

③子组件中调用父vue文件中的函数

<template>
    <view class="test">
        {{msg}}
        <button type="default" @click="userFather()">调用父组件方法</button>
    </view>
</template>

<script>
    export default {
     //父vue页面传递给组件的参数获取方式 props: { can1: { type: String, default: function() { return "null" } } },
     //实时监听某个变量变化 watch: { can1: { handler() { console.log(this.can1,"5556666"); this.msg = this.can1 }, //监听到数据变化时立即执行 immediate: true }, }, data() { return { msg: "" } }, onl oad() { }, onShow() { }, methods: { userFather() { //第一种调用父组件函数的方法 this.$parent.sghdws('这是子组件参数'); //第二种调用父组件函数的方法 //this.$emit('sghdws', "这是子组件参数") }, open() { console.log("调用子组件方法"); } } } </script> <style> </style>

2、创建父vue文件

<template>
    <view>
                <!--通过can1进行传参,同样可以can2等,通过ref定义子组件的名称,便于从vue文件中调用子组件中的函数-->
        <test1 :can1="suiji" ref="test1"></test1>
        <button type="default" @click="userChild()">调用子组件方法</button>
    </view>
</template>

<script>
    //引入组件
    import test1 from "@/component/test.vue";
    
    export default {
        //使用组件
        components:{
            test1
        },
        data() {
            return {
                suiji:''
            }
        },
        onl oad() {
        },
        onShow() {
            var p_this = this;
            //当前时间,使得组件中的msg一直变化为当前时间(实现第一个需求)
            setInterval(function() {
                let h = new Date().getHours();
                let i = new Date().getMinutes();
                let s = new Date().getSeconds();
                let hh = (h < 10) ? "0" + h : h;
                let ii = (i < 10) ? "0" + i : i;
                let ss = (s < 10) ? "0" + s : s;
                p_this.suiji = hh + ":" + ii + ":" + ss;
            }, 1000);
        },
        methods: {
                        //子组件调用父vue文件中的这个函数(实现第二个需求)
            sghdws(a) {
                console.log(a);
            },
                        //父vue文件调用这个函数,这个函数调用子组件中的函数(实现第三个需求)
            userChild() {
                console.log("父组件方法---------");
                this.$refs.test1.open()
            }
        }
    }
</script>

<style>
</style>            

最终实现效果:

uniapp自定义组件

时间是从父vue文件中获取出来的,通过属性传递给了子组件,子组件中定义了变量监听,实时更新时间,实现了父vue文件参数传递到子组件的需求

点击“调用父组件方法”,可以调用父vue页面的函数

点击“调用子组件方法”,可以调用子组件页面函数

上一篇:java版微信小程序登录商城源码VR全景+b2b2c多商家入驻前后端分离商城源码


下一篇:代码设置Shape和Selector