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>