问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
vvhl
    64125146173

    如下面的代码，想在父组件中，当满足某个条件时，修改子组件的 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>
    vue.js
    阅读 15.2k
    3 个回答
    得票最新
    头像
    风中孤狼
      1.3k11225
      ✓ 已被采纳

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

      this.refs.xxx.子组件定义的方法()
      头像
      匠心
        4.6k2919

        如何构建一个组件，组件之前数据如何共享，这是开发中必须要学习的内容。vue.js组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用 props 把数据传给子组件。另外vue.js中提倡单向数据流：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。当子组件需要更新父组件的状态时，我们可以通过事件触发。下面是一个利用props传递数据和使用事件触发父组件状态的典型例子：

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="app">
        {{ message }}
        <button v-on:click="parentAtion">parentAtion</button>
        <child v-bind:param="message"  v-on:childfn="fromChild"></child>
    </div>

    <script type="text/x-template" id="child-tpl">
        <div>
            <span>{{param}}</span>
            <button v-on:click="childAtion">childAtion</button>
        </div>
    </script>

    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script type="text/javascript">
        Vue.component('child', {
            template: '#child-tpl',
              props: ['param'],
              methods: {
                  childAtion: function(){
                      // 触发事件
                      this.$emit('childfn', 'child component');
                  }
              }
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello vuejs!'
            },
            methods: {
                parentAtion: function(){
                    this.message = 'parent component';
                },
                fromChild: function(msg){
                    this.message = msg;
                }
            }
        })
    </script>
</body>
</html>
        头像
        VioletJack
          93141421

          试着将data改为props呢？先给props一个默认值，然后在父级组件传入你想要的数据。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题