其他分享
首页 > 其他分享> > vue父子组件之间的值传递

vue父子组件之间的值传递

作者:互联网

vue父子组件之间的值传递

在同一级文件目录下,当前的组件叫父组件,引入的组件叫子组件。

1.父组件向子组件传值

关键字:props

父组件通过子组件的标签绑定普通属性和数据,子组件通过关键字props来接收父组件传来的值,接收时要指定接收数据的数据类型type,类型第一个字母要大写,如Array、String、Number,如果该数据是必传的要设置required:true,如果不是必传就设置默认值 default。

父组件代码:

<template>
    <div>
        <h4>父子组件之间的传值</h4>
        <child :str="str" :arr="arr"/>
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
        components: {Child},
        data() {
            return {
                str: '我是一个字符串',
                arr: ['arr1','arr2',3,{key:'value'}]
            }
        },
    }
</script>
<style scoped>
    div{
        background-color: aquamarine;
    }
</style>

子组件代码:

<template>
    <div>
        <p>父组件传来的字符串:{{str}}</p>
        <hr>
        <p>父组件传来的数组:{{arr}}</p>
    </div>
</template>
<script>
    export default {
        props: {
            str: {
                type: String,
                default: '父组件没传'
            },
            arr: {
                type: Array,
                required: true
            }
        }
    }
</script>

运行得到结果:
在这里插入图片描述
如果必传的arr没有传值会报错:[Vue warn]: Missing required prop: “arr”
:props的值是只读的,不可修改,当属性的类型为object和array时,必须用一个工厂函数返回默认值

子组件向父组件传值

关键字:$emit

子组件标签添加一个事件,在这个事件方法中用$emit传值给父组件,父组件在引入的子组件标签上写一个自定义事件,在这个事件函数中接收来自子组件的传值。
$ emit 的写法 : this.$emit(‘父组件中的自定义事件’,要传的值)
父组件代码:

<template>
    <div>
        <h4>父子组件之间的传值-子传父</h4>
        <child @sendParent="fromChild"/>
        <span>来自子元素的值:{{data}}</span>
    </div>
</template>

<script>
    import Child from './Child.vue'
    export default {
        components: {Child},
        data() {
            return {
                data:''
            }
        },
        methods: {
            fromChild(value) {
                this.data = value
            }
        },
    }
</script>
<style scoped>
    div{
        background-color: aquamarine;
    }
</style>

子组件代码:

<template>
    <div>  
        <input type="text" v-model="tofather" @change="sendData"> //除了change也可以是其他事件
    </div>
</template>
<script>
    export default {       
        data() {
            return {
                tofa:tofather
            }
        },
        methods: {
            sendData() {
                this.$emit('sendParent',this.tofather)
            }
        },
    }
</script>

输入内容后回车得到结果:
在这里插入图片描述
父组件写在引入的子组件标签上自定义事件名可以任意的,也可以是常规的事件名,这个事件名只是为了传值,没有其他意义。如我们案例中的sendParent改为click,你点击元素时是没有触发点击事件的。

标签:arr,vue,default,父子,Child,组件,data,传值
来源: https://blog.csdn.net/weixin_44825338/article/details/121799871