vue.js - vue单文件组件中，父组件如何修改子组件的数据

问题描述

问 题

如下面的代码，想在父组件中，当满足某个条件时，修改子组件的 activeIndex 的值，该怎么做呢？

父组件：

<script>
    import HeaderBox from '../components/HeaderBox.vue'
    export default {
        data() {
            return {

            }
        },
        components: {
            HeaderBox
        }
    }
</script>

子组件HeaderBox.vue：

<script>
    export default {
        data() {
            return {
                activeIndex: "/loginpage"
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

解决方案

<子组件 ref='xxx'></子组件>
父组件：

this.refs.xxx.子组件定义的方法()  

这篇关于vue.js - vue单文件组件中，父组件如何修改子组件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！