vue-父子组件传值

对于父子组件可以简单地理解为A组件中嵌入了B组件，则A组件称作父组件，B组件称为子组件。对于父子组件通信通常采用的是 props down(父组件向子组件传值), events up(子组件向父组件传值)两种方式。

首先我们创建一个子组件Subcomponent.vue，在父组件中引入并注册使用，父组件代码：

js: // 引入子组件
    import Subcomponent from '@/components/Subcomponent'
    export default{
        name: 'Parent',
        components:{
            // 注册子组件
            Subcomponent
        },
        data(){
            return{
                parent:'父组件中的值'
            }
        }
    }
wxml:

<Subcomponent :fromParent="parent"></Subcomponent>

那我们先看下props down：

父组件在使用子组件时，在子组件中动态绑定一个自定义属性(fromParent)，对于子组件则是通过定义一个props属性去接收父组件传过来的值，这里的props是个数组props:['fromParent'],在子组件中使用该值和使用data中的数据方式一致。

子组件代码：

<template>
    <div>
        <p>我是子组件，右侧值为父组件传过来的值<-----{{fromParent}}</p>
    </div>
</template>

<script>
    export default{
        name: 'Subcomponent',
        props:['fromParent'],
        data(){
            return{
                
            }
        }
    }
</script>

效果图如下

vue-父子组件传值

接下来看看子组件如何向父组件传值，首先他们需要一个中间介质自定义事件,对于子组件来说需要触发某个事件进行传值，这里我们在子组件中写一个button按钮并绑定一个click事件SubcomponentFun，在该处理函数(SubcomponentFun)中通过$emit来触发一个自定义事件监听器(这里我定义为zdyParentfun)，并传递一个参数(也就是自定义事件监听器对应响应事件中的形参params)。对于父组件就是在使用子组件时，通过v-on：自定义事件监听器名(这里和子组件中的自定义事件监听器名称一致zdyParentfun) 并绑定一个响应事件(handleSubcomponentFun)，用于处理子组件传过来的值。具体的实现代码如下：

子组件：

<template>
    <div>
        <p>我是子组件，右侧值为父组件传过来的值<-----{{fromParent}}</p>
        <!-- 向父组件传值的按钮 -->
        <button type="success" @click="SubcomponentFun">改变父组件值</button>
    </div>
</template>

<script>
    export default{
        name: 'Subcomponent',
        props:['fromParent'],
        data(){
            return{
                fromSubcomponent:'该值Subcomponent来自于子组件',
            }
        },
        methods:{
            SubcomponentFun(){
                console.log(this.fromSubcomponent)
                this.$emit('zdyParentfun',this.fromSubcomponent)
            }
        }
    }
</script>

父组件：

<template>
    <div>
        <b>我是父组件   {{params}}</b>
        <!-- 子组件 -->
        <Subcomponent :fromParent="parent" v-on:zdyParentfun="handleSubcomponentFun"></Subcomponent>
        <input type="text" v-model="parent" />
    </div>
</template>

<script>
    // 引入子组件
    import Subcomponent from '@/components/Subcomponent'
    export default{
        name: 'Parent',
        components:{
            // 注册子组件
            Subcomponent
        },
        data(){
            return{
                parent:'父组件中的值',
                params:"" 
            }
        },
        methods:{
            handleSubcomponentFun:function (params){
                this.params = params
                console.log(params)
            }
        }
    }
</script>

效果图如下

vue-父子组件传值

vue-父子组件传值

相关推荐