vue父组件接收不到子组件数据，求解答！！！

发布于 2022-09-07 03:36:07 字数 1909 浏览 12 评论 0

最近在自学vue,照着网上例子写了一个父子组件的双向绑定，只实现了单向绑定。父组件的数据不能随子组件变化，只能是子组件数据随父组件变化；在官网看了文档一时还是无法理解其思路。
请各位前辈帮忙看看是哪里出的问题，谢谢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>

<body>
    <div id="app">
        <div>
            <span>父：{{value}}</span>
            <input type="text" v-model='value' v-on:click="c_lick">
        </div>
        <my-com v-model="value"></my-com>
    </div>
    <template id="template1">
        <div>
            <span>子：{{childvalue}}</span>
            <input type="text" v-model='childvalue' v-on:click="f_click">
        </div>
    </template>
    <script>
        new Vue({
            el: '#app',
            data: {
                value: ''
            },
            methods: {
                c_lick() {
                    //this.value--;
                }
            },
            components: {
                'my-com': {
                    template: '#template1',
                    props: ['value'],
                    data: function () {
                        return {
                            childvalue: this.value
                        }
                    },
                    methods: {
                        f_click() {
                            //this.currentvalue++;
                            this.$emit('input', this.childvalue);
                        }
                    },
                    watch: {
                        value(val) {
                            this.childvalue = val;
                        }
                    }
                }
            }
        })



    </script>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬﹪忆之殇 2022-09-14 03:36:07

稍微改了下，代码如下。
这问题的确简单，不过慢慢来就好。
如果想子组件到父组件通信，最常用的也是之前你代码有的是：this.$emit('input', v) 。
不过，子组件发出了通知，父组件也需要接收，你少了接收。
@input="getDataFromChild" 这样接收。
可以再看看 VUE 的组件通信内容。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>双向绑定</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">
    <div>
      <span>父：{{value}}</span>
      <input type="text" v-model='value' />
    </div>
    <my-com v-model="value" @input="getDataFromChild"></my-com>
  </div>
  <template id="template1">
    <div>
      <span>子：{{childvalue}}</span>
      <input type="text" v-model='childvalue' />
    </div>
  </template>
  <script>
  new Vue({
    el: '#app',
    data() {
      return {
        value: ''
      };
    },
    methods: {
      getDataFromChild(v) {
        this.value = v;
      }
    },
    components: {
      'my-com': {
        template: '#template1',
        props: ['value'],
        data() {
          return {
            childvalue: this.value
          };
        },
        watch: {
          value(val) {
            this.childvalue = val;
          },
          childvalue(v) {
            this.$emit('input', v);
          }
        }
      }
    }
  })
  </script>
</body>

</html>

回复收藏 0

半寸时光 2022-09-14 03:36:07

vue双向绑定，首先来说要搞懂单向传递的原理，逐渐深入。父传子用props,子传父用$emit。
父传子还好说，在父级里把要传入的值，在子组件上动态绑定（v-bind）一个属性，把值传进去，然后子级用props来接受这个属性。
子传父的话有点复杂，首先来说子级在一个方法methods里，用this.$emit('属性名',传的值)来传给父级，而父级需要用一个v-on来接收这个值。
下述为双向传递，我自己写了一篇笔记，分享给你，对你学习vue很有帮助，好好研读

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>baidu</title>
        <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
       <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
       <input type="button" value="change" @click="change">
    </div>
</body>
<script type="text/javascript">
        Vue.component("switchbtn", {
        template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//①创建props属性result的副本--myResult
            }
        },
        watch: {
            /* 此处是重点 */
            result(val) {
                this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            myResult(val){
                this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods: {
            change() {
                this.myResult = !this.myResult;
            }
        }
    });
 
    new Vue({
        el: "#app",
        data: {
            result: true
        },
        methods: {
            // 外部触发方法
            change() {
                this.result = !this.result;
            },
            // 接收
            onResultChange(val){
                this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
            }
        }
    });
</script>
</html>

回复收藏 0