vue中父子传值问题

最新推荐文章于 2022-02-20 14:29:02 发布

xiaoyuan9527

最新推荐文章于 2022-02-20 14:29:02 发布

阅读量309

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaoyuan9527/article/details/121523296

版权

本文介绍了Vue.js中父子组件通信的主要方式。通过props实现父组件向子组件传递数据，而子组件回传数据则通过自定义事件($emit)。此外，也提及了非父子组件间使用Vuex的store进行状态管理。

摘要由CSDN通过智能技术生成

vue中父子传值通过props和$emit来执行，非父子传值利用vuex中的store执行(这是个插件，可以看我前面的博客)

父传子

父组件通过在子组件上进行值的绑定传递，子组件通过props接收父组件传递的值

写法:

父传子

<template>
    <div>
        <h2>this is Father</h2>
        <button @click="send">点击父传子</button>
        <span>子传父的值为:{{childValue}}</span>
        <br>
        <!-- 这里是子传父的关键 -->
        <!-- 自定义一个操作getValue(这是会被子代调用的操作)，里面的方式是拿来接收值的 -->
        <child @getValue="getHow" :fatherValue="fatherValue" />
    </div>
</template>
<script>
    // 引入子组件
    import Child from './child.vue'
    export default {
        components: {
            Child
        },
        data() {
            return {
                childValue: '',
                fatherValue: ''
            }
        },
        methods: {
            // 点击按钮赋予子代值
            send() {
                this.fatherValue = '这是父值'
            },
            // 这个方法默认接收一个data是被子代传递的
            getHow(data) {
                this.childValue = data;
            }
        }
    }
</script>

子传父

<template>
    <div>
        <h4>this is Child</h4>
        <button @click="send">点击子传父</button>
        <span>{{fatherValue}}</span>
    </div>
</template>
<script>
    export default {
        // 当设置props以后，接收到的数据不用data，直接用props就好
        props: {
            fatherValue: {
                // 被传递的值类型
                type: String,
                // 是否必传
                required: true,
                // 默认值
                default: ''
            }
        },
        data() {
            return {
                childValue: ''
            }
        },
        methods: {
            send() {
                this.childValue = '这是子值'
                // 这里是将值传递给父代
                // 调用父代自定义的操作，然后传值
                this.$emit('getValue', this.childValue)
            }
        }
    }
</script>

总结:

父传子通过props 子传父通过自定义操作，通过方法传值