uniapp 组件调用

win

1：父组件向子组件传值

子组件：download.vue

</template>

        <view> {{downloadmsg}} </view>

</template>

<script>

        export default{

                props: {

                        downloadmsg: {

                                type: String,

                                default: true

                        }

                }

        }

</script>

• 使用 props 接收，并设置 type 类型
• default
  

①：type：String

                        downloadmsg: {

                                type: String,

                                default: true

                        }

②：type：Array

                        downloadmsg: Array,
                                default() {
                                        return ['', ''];
                        }


③：type：Object


                downloadmsg: {
                        type: Object,
                        default() {
                                return {};
                        }
                },


④：type：Boolean
                downloadmsg: {
                        type: Boolean,
                        default: true
                },

父组件：index.vue

<template>
        <view>
                <download :downloadmsg="downloadmsg"></download>
        </view>
</template>

<script>
        import download from "../../components/download/download.vue"
        export default{
                components:{
                        download
                },
                data() {
                        return {
                                downloadmsg:"世界你好"
                        }
                },
        }
</script>

• import：引入子组件
• components：注册子组件
• downloadmsg：传输值的内容
  

2：父组件调用子组件方法

子组件：download.vue

</template>

        <view> {{downloadmsg}} </view>

</template>

<script>

        export default{

                methods:{

                        childdown(){

                                console.log("hello world");

                        }

                }

        }

</script>

父组件：index.vue

<template>

        <view>

                <view @click="childMeth">调用子组件方法</view>

                <download ref="downloadmeth"></download>

        </view>

</template>

<script>

        import download from "../../components/download/download.vue"

        export default{

                components:{

                        download

                },

                methods:{

                        childMeth(){

                                this.$refs.downloadmeth.childdown();

                        }

                }

        }

</script>

• import：引入子组件
• components：注册子组件
• ref：为子组件设置一个 id
• this.$refs：使用子组件 id ，调用子组件方法
  

3：子组件调用父组件方法并传值

子组件：download.vue

</template>

        <view @click="childMeth"> 点我传值 </view>

</template>

<script>

        export default{

                methods:{

                        childMeth(){

                                this.$emit("parentMeth","世界你好");

                        }

                }

        }

</script>

• this.$emit：调用父组件方法
  

父组件：index.vue

<template>
        <view>
                <download @parentMeth="parent" ref="downloadmeth"></download>
        </view>
</template>

<script>
        import download from "../../components/download/download.vue"
        export default{
                components:{
                        download
                },
                methods:{
                        parent(e){
                                console.log(e);
                        }
                }
        }
</script>

• import：引入子组件
• components：注册子组件
  

3：子组件生命周期
方法        描述
beforeCreate        组件初始化，但数据原生观测、自定义观测(event\watcher)没生成之前。 未完全创建阶段
created        组件创建后，但还未挂载 完全创建阶段
beforeMount        组件渲染后，挂载前。 渲染后待挂载
mounted        组件挂载到页面 可用 vm.$el 访问 挂载完成
beforeUpdate        虚拟 DOM 重新渲染和打补丁之前 再次渲染前
updated        组件 DOM 已经更新 再次渲染后
activated        keep-alive 组件激活时调用。 当前组件被激活：显示
deactivated        keep-alive 组件停用时调用。 当前组件隐藏
beforeDestroy        实例销毁之前调用。实例仍然完全可用。 销毁前
destroy        Vue 实例销毁后调用
————————————————
版权声明：本文为CSDN博主「一拖再拖。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41974199/article/details/107837388