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 函數(shù)控制

這個是父組件調用子組件的函數(shù)進行對子組件進行操作

    <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>