uniapp父子组件传值3种方法(props、slot和ref)

更新时间：2023年07月22日 11:02:20 作者：1VR

这篇文章主要给大家介绍了关于uniapp父子组件传值的3种方法,方法包括props、slot和ref,最近看到uniapp组件传值的方法,这里记录一下,需要的朋友可以参考下

前言

uniapp，父组件向子组件传值有三种方法，分别为props、slot，和ref

1、props

这个应该是最简单最常用的方法，就是子组件写变量，然后把变量名字在js中进行props

<template>
        <view>
            <!-- 我是子组件 newzujian-->
            <view class="">
                {{value}}
            </view>
        </view>
    </template>
    <script>
        export default {
            props:['value'],
            methods:{
            }
        }
    </script>

<template>
        <view>
            <!-- 我是父组件 -->
            <newzujian value='789' >
            </newzujian>
        </view>
    </template>
    <script>
        export default {
            methods: {
                }
        }
    </script>

2、slot

插值比较灵活，可以在任何需要写入的地方进行slot ，slot写入name标签后，在父组件进行插值#name

<template>
        <view>
            <!-- 我是子组件 newzujian-->
            <view class="">
                <slot name="value"></slot>
            </view>
        </view>
    </template>
    <script>
        export default {
            methods:{
            }
        }
    </script>

    <template>
        <view>
            <!-- 我是父组件 -->
            <newzujian  >
                <template #value>
                    789
                </template>
            </newzujian>
        </view>
    </template>
    <script>
        export default {
            methods: {
                }
        }
    </script>

3、ref 函数控制

这个是父组件调用子组件的函数进行对子组件进行操作

    <template>
        <view>
            <!-- 我是子组件 newzujian-->
            <view class="">
                {{value}}
            </view>
        </view>
    </template>
    <script>
        export default {
            data(){
              return{
                  value:''
              }    
            },
            methods:{
                gaibian(){
                    this.value='789'
                }
            }
        }
    </script>

    <template>
        <view>
            <!-- 我是父组件 -->
            <newzujian ref="hanshu" >
            </newzujian>
            <button @click="dianji">click</button>
        </view>
    </template>
    <script>
        export default {
            onLoad() {
            },
            methods: {
                dianji(){
                    this.$refs.hanshu.gaibian()
                }
                }
        }
    </script>

总结

到此这篇关于uniapp父子组件传值3种方法(props、slot和ref)的文章就介绍到这了,更多相关uniapp父子组件传值内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

JavaScript全局函数使用简单说明
JavaScript下比较常用的一些字符处理等函数，学习js的朋友经常用得到。
2011-03-03
js中的前绑定和后绑定详解
这篇文章详细介绍了js中的前绑定和后绑定，有需要的朋友可以参考一下
2013-08-08
JavaScript操作数组的常用方法总结
这篇文章总结了JavaScript操作数组的常用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
JavaScript中的this,call,apply使用及区别详解
本文结合基本javascript的权威书籍中的内容，根据自己的理解，通过相关示例向大家展示了javascript中this,call,apply使用及区别，非常的细致全面，希望大家能够喜欢。
2016-01-01
javascript中的throttle和debounce浅析
这篇文章主要介绍了javascript中的throttle和debounce浅析,分别介绍了throttle和debounce的使用场景及具体案例,需要的朋友可以参考下
2014-06-06
常用的JS验证和函数汇总
本文是将个人整理收集的一些js验证函数，都是经常能够用到的，非常实用的代码，这里分享给有相同需求的小伙伴。
2014-12-12
js类式继承的具体实现方法
这篇文章主要介绍了js类式继承的具体实现方法，有需要的朋友可以参考一下
2013-12-12
从未有过的JavaScript运算符详细解释
这篇文章主要为大家介绍了，JavaScript运算符详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
JavaScript的引用数据类型你了解多少
这篇文章主要为大家详细介绍了JavaScript的引用数据类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
深入理解JavaScript系列（48）：对象创建模式（下篇）
这篇文章主要介绍了深入理解JavaScript系列（48）：对象创建模式（下篇）,本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码,需要的朋友可以参考下
2015-03-03