uniapp父子组件传值三种方法

这篇具有很好参考价值的文章主要介绍了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>
  1. 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>
  1. ref 函数控制

这个是父组件调用子组件的函数进行对子组件进行操作文章来源地址https://www.toymoban.com/news/detail-548615.html

    <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父子组件传值三种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(50)
  • 微信小程序:父子组件传值

    在微信小程序里,父组件可以向子组件传值,子组件也可以向父组件传值,不过这两种传值方式不大相同,下面先简单介绍这两种传值的区别。 两者的区别 父组件向子组件传值,使用的是   属性绑定   的方法,并且只能传递普通类型的数据 子组件向父组件传值,使用的是

    2024年02月07日
    浏览(62)
  • 【微信小程序】父子组件之间传值

    1. 父组件向子组件 传值 2. 子组件向父组件 传值 父向子传值使用的是 属性绑定 ,子组件中的 properties 对象进行接收父组件传递过来的值。 子向父传值使用的是 自定义事件 ,父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值。 1.1 在父组件的.json文件中导入子

    2024年02月16日
    浏览(48)
  • vue3 父子组件传值 记录

    最近这个组件之间传值用的较多,我这该死的记性,总给忘记写法,特此记录下 补充:LeftView.vue 是父组件; Video.vue 是子组件 Video.vue 子组件 LeftView.vue 父组件 第一步 创建bus.js文件 第二步 分别在需要相互传参的组件中引入bus.js文件,并相互传参

    2024年02月11日
    浏览(44)
  • 小程序父子组件间传值(微信/支付宝/钉钉)

    以传递一个简单的count值为例,实现父子组件的双向绑定,无论是点击父组件按钮还是子组件按钮,count值都自增 父传子 简单的将父组件在data中定义的属性,赋给子组件定义在properties中的属性即可 通过在父组件中设置一个按钮,使count自增,子组件的count属性也会随之自增

    2024年02月10日
    浏览(80)
  • vue父子组件传值不能实时更新

    最近做项目,遇到个大坑,这会爬出来了,写个总结,避免下次掉坑。 vue父子组件传值不能实时更新问题,父组件将值传给了子组件,但子组件显示的值还是原来的初始值,并没有实时更新,为什么会出现这种问题呢? 出现这个问题,可能有以下两个原因: 一、 父组件没有

    2024年02月16日
    浏览(53)
  • Vue3 TS写法 父子组件传值(通讯)

    父组件: 子组件: 通过defineProps来接受数据(无须引入直接使用即可) 子组件可写默认值也可以不写两种情况 子组件通过defineEmits派发一个事件 (一样无须引入直接使用即可)  父组件接受子组件的事件 chilFun

    2024年02月15日
    浏览(40)
  • vue父子组件传值(v-model)

    子组件使用 props 接收父组件传来的值 1)这里有个大坑, el-dialog 中一定要用 model-value 来代替 v-model ,不能用 v-model ,否则会报错 (2)子组件中修改父组件传入的参数 visible 时,使用 👇方式

    2024年02月11日
    浏览(42)
  • vue3 使用 mitt 插件实现非父子组件传值

    介绍 : mitt 是一个 JavaScript 库,用于实现事件的订阅和发布 1、安装 2、新建 utils/eventBus.ts 文件 3、使用

    2024年02月09日
    浏览(49)
  • Vue:父子组件传值( props、sync、v-model )

    子组件通过$emit方法,通过自定义事件的方式将自身的值传递给父组件 在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。 所以推荐以

    2023年04月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包