uniapp父子组件传值三种方法

最新推荐文章于 2024-09-19 08:22:35 发布

1VR

最新推荐文章于 2024-09-19 08:22:35 发布

阅读量4.5k

点赞数 1

文章标签： uni-app 前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/zhtxilyj/article/details/129711112

版权

文章介绍了uniapp框架下，父组件向子组件传递值的三种主要方法：props、slot和ref。props是最直接的方式，通过定义子组件的props属性接收父组件传递的值；slot提供更灵活的插值方式，允许在子组件内任何位置插入父组件的内容；ref则允许父组件直接调用子组件的方法来改变子组件的状态。

摘要由CSDN通过智能技术生成

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

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>

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>

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>