vue父子组件之间的值传递

2024-01-29 21:13:34

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，你点击元素时是没有触发点击事件的。

码农公寓