uni组件传值注意

Posted 2020-12-05 yc211

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni组件传值注意相关的知识，希望对你有一定的参考价值。

目录介绍

01.组件传值遇到坑
02.父组件传值给子组件
03.子组件传值给父组件

01.组件传值遇到坑

子组件给父组件传值注意点

注意子组件触发事件定义的方法，首先在父组件中需要绑定子组件内部对应事件，然后一定要和父控件接受的保持一致，否则无法传递数据。

//在area.vue中，进行事件触发，传递数据
this.$emit(‘onConfirm‘,true, selectVal)

//在select-school.vue中，需要在在子组件标签上绑定子组件内部对应事件，并且方法名一致
<!-- 地区选择器 -->
<optional :status=‘show‘ @onUpdate=‘onUpdate‘ @onConfirm=‘onConfirm‘></optional>

遇到疑问？
- 要是同级的组件，那么该如何传递数据呢？

02.父组件传值给子组件

父组件的代码如下

<!-- 父组件传子组件 -->
<!-- 父组件内部写法 -->
<template>
    <view>
        <h2>父组件</h2>
        <!-- 绑定自定义属性传递数据 -->
        <children style="color: #0000FF;" :value="valPar" ></children>
    </view>
</template>

<script>
    //引入子组件
    import children from "../../pages/ele/element-children1.vue"
    export default {
        data() {
            return {
                valPar:"父组件传递过来的值"
            }
        },
        components:{
			//注册子组件
            children
        },
    }
</script>

子组件的代码如下

<!-- 父组件传子组件 -->
<!-- 子组件内部写法 -->
<template>
    <h2>子组件收到:{{value}}</h2>
</template>

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

03.子组件传值给父组件

父组件的代码如下

<!-- 子组件传父组件 -->
<!-- 父组件内部写法 -->
<template>
    <view>
        <!-- 接收到子组件传递的数据 -->
        <h2>父组件接收到的值:{{valueChild}}</h2>
        <!-- 在子组件标签上绑定子组件内部对应事件，并触发对应回调 -->
        <children style="color: #0000FF;" @Transmit="handle"></children>
    </view>
</template>

<script>
    //引入子组件
    import children from "../../pages/ele/element-children2.vue"
    export default {
        data() {
            return {
				//定义属性接收数据
                valueChild:"",
            }
        },
        components:{
			//注册子组件
            children
        },
        methods:{
            // 子组件内部触发事件对应回调handle
            handle(val){
                this.valueChild=val;
            }
        }
    }
</script>

子组件的代码如下

<!-- 子组件传父组件 -->
<!-- 子组件内部写法 -->
<template>
    <view>
        <h2>子组件</h2>
        <!-- 点击按钮进行事件触发 -->
        <button @click="handleTransmit">点击给父组件传值</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //要传递的数据
                valueParent: "子组件传递过来的数据"
            }
        },
        methods: {
            handleTransmit() {
                // 进行事件触发，传递数据
                this.$emit("Transmit", this.valueParent)
            }
        }
    }
</script>

以上是关于uni组件传值注意的主要内容，如果未能解决你的问题，请参考以下文章