uniapp中組件傳值

1、父組件傳子組件

父組件內部寫法：

<template>
    <view>
        <h2>首頁</h2>
        <!-- 綁定自定義屬性傳遞數據 -->
        <Two :value="valPar"></Two>
    </view>
</template>

<script>
    //引入子組件
    import Two from "../../components/two/two.vue"
    export default {
        data() {
            return {
                valPar:"父組件傳遞過來的值"
            }
        },
        components:{
            Two//注冊子組件
        },
        methods: {
    
        }
    }
</script>

子組件內部寫法：

<template>
    <h2>two組件收到:{{value}}</h2>
</template>

<script>
    export default {
        props:{
            value:{
                type:String,
                default:"默認值"
            }
        },
        data() {
            return {
                
            }
        },
        created(){
            
        }
    }
</script>

2、子組件傳父組件 -- 寫法1

父組件內部寫法：

<template>
    <view>
        <!-- 接收到子組件傳遞的數據 -->
        <h2>接收到的值:{{valueChild}}</h2>
        <!-- 在子組件標簽上綁定子組件內部對應事件，並觸發對應回調 -->
        <One @Transmit="handle"></One>
    </view>
</template>

<script>
    //引入子組件
    import One from "../../component/one.vue"
    export default {
        data() {
            return {
                valueChild:"",//定義屬性接收數據
            }
        },
        components:{
            One//注冊子組件
        },
        onLoad(){
            
        },
        methods:{
            // 子組件內部觸發事件對應回調handle
            handle(val){
                this.valueChild=val;
            }
        }
    }

子組件內部寫法：

<template>
    <view>
        <h2>one組件</h2>
        <!-- 點擊按鈕進行事件觸發 -->
        <button @click="handleTransmit">點擊給父組件傳值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //要傳遞的數據
                valueParent: "子組件傳遞過來的數據"
            }
        },
        methods: {
            handleTransmit() {
                // 進行事件觸發，傳遞數據
                this.$emit("Transmit", this.valueParent)
            }
        }
    }
</script>
</script>

 

子組件傳父組件 -- 寫法2

父組件內部寫法：

<template>
    <view>
        <!-- 接收到子組件傳遞的數據 -->
        <h2>接收到的值:{{valueChild}}</h2>
        <Two></Two>
    </view>
</template>

<script>
    //引入子組件
    import Two from "../../components/two/two.vue"
    export default {
        data() {
            return {
                valueChild:"",//定義屬性接收數據
            }
        },
        components:{
            Two//注冊子組件
        },
        onLoad(){
            // 進行事件綁定,val為子組件傳遞的數據
            uni.$on("Transmit",(val)=>{
                this.valueChild=val;
            })
        }
    }
</script>

子組件內部寫法：

<template>
    <view>
        <h2>two組件</h2>
        <!-- 點擊按鈕進行事件觸發 -->
        <button @click="handleTransmit">點擊給父組件傳值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //要傳遞的數據
                valueParent: "子組件傳遞過來的數據"
            }
        },
        methods: {
            handleTransmit() {
                // 進行事件觸發，傳遞數據
                uni.$emit("Transmit", this.valueParent)
            }
        }
    }
</script>