脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → uniapp父子组件传值

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中的原型和原型链

    这篇文章介绍了javascript中的原型和原型链,需要的朋友可以参考下
    2015-07-07
  • ES6基础语法之class类介绍

    ES6基础语法之class类介绍

    这篇文章介绍了ES6中class类的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • JavaScript For 循环

    JavaScript For 循环

    JavaScript For 循环...
    2007-04-04
  • javascript中的=等号个数问题两个跟三个有什么区别

    javascript中的=等号个数问题两个跟三个有什么区别

    一个等号就是个赋值的作用，主要问题在于两个跟三个等号的区别，想必有很多的朋友都不知道吧，在本文有个不错的示例主要介绍下两者到底有什么区别，感兴趣的朋友不要错过
    2013-10-10
  • JavaScript中的getTimezoneOffset()方法使用详解

    JavaScript中的getTimezoneOffset()方法使用详解

    这篇文章主要介绍了JavaScript中的getTimezoneOffset()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • iframe 上下滚动条如何默认在下方实现原理

    iframe 上下滚动条如何默认在下方实现原理

    iframe 上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，本文将介绍，如和实现在下方
    2012-12-12
  • Dojo Javascript 编程规范 规范自己的JavaScript书写

    Dojo Javascript 编程规范 规范自己的JavaScript书写

    良好的JavaScript书写习惯的优点不言而喻，今天彬Go向大家推荐Dojo Javascript 编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。感谢i.feelinglucky的翻译
    2014-10-10
  • js切换div css注意的细节

    js切换div css注意的细节

    有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们
    2012-12-12
  • JavaScript 变量命名规则

    JavaScript 变量命名规则

    学习js的朋友一定要知道和注意，其实每种语言都有它的命名规则。
    2009-09-09
  • js前端面试题及答案整理（一）

    js前端面试题及答案整理（一）

    各公司秋招很快就开始了，最近在准备面试的东西，干脆将发现的各类面试题整理一下共享出来，大部分面试题是没有标准答案的，我给出的答案也是仅供参考，如果有更好的解答欢迎在评论区留言
    2016-08-08

最新评论