vue父組件接收不到子組件數(shù)據(jù)，求解答！??！

最近在自學(xué)vue,照著網(wǎng)上例子寫了一個(gè)父子組件的雙向綁定，只實(shí)現(xiàn)了單向綁定。父組件的數(shù)據(jù)不能隨子組件變化，只能是子組件數(shù)據(jù)隨父組件變化；在官網(wǎng)看了文檔一時(shí)還是無法理解其思路。
請(qǐng)各位前輩幫忙看看是哪里出的問題，謝謝

<!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>

回答

編輯回答

入她眼

vue雙向綁定，首先來說要搞懂單向傳遞的原理，逐漸深入。父?jìng)髯佑?a rel="nofollow noreferrer">props,子傳父用$emit。
父?jìng)髯舆€好說，在父級(jí)里把要傳入的值，在子組件上動(dòng)態(tài)綁定（v-bind）一個(gè)屬性，把值傳進(jìn)去，然后子級(jí)用props來接受這個(gè)屬性。
子傳父的話有點(diǎn)復(fù)雜，首先來說子級(jí)在一個(gè)方法methods里，用this.$emit('屬性名',傳的值)來傳給父級(jí)，而父級(jí)需要用一個(gè)v-on來接收這個(gè)值。
下述為雙向傳遞，我自己寫了一篇筆記，分享給你，對(duì)你學(xué)習(xí)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?'開':'關(guān)'}}</div>",
        props: ["result"],
        data: function () {
            return {
                myResult: this.result//①創(chuàng)建props屬性result的副本--myResult
            }
        },
        watch: {
            /* 此處是重點(diǎn) */
            result(val) {
                this.myResult = val;//②監(jiān)聽外部對(duì)props屬性result的變更，并同步到組件內(nèi)的data屬性myResult中
            },
            myResult(val){
                this.$emit("on-result-change",val);//③組件內(nèi)對(duì)myResult變更后向外部發(fā)送事件通知
            }
        },
        methods: {
            change() {
                this.myResult = !this.myResult;
            }
        }
    });
 
    new Vue({
        el: "#app",
        data: {
            result: true
        },
        methods: {
            // 外部觸發(fā)方法
            change() {
                this.result = !this.result;
            },
            // 接收
            onResultChange(val){
                this.result=val;//④外層調(diào)用組件方注冊(cè)變更方法，將組件內(nèi)的數(shù)據(jù)變更，同步到組件外的數(shù)據(jù)狀態(tài)中
            }
        }
    });
</script>
</html>

2017年1月26日 09:29

編輯回答

解夏

沒啥問題啊，你本來寫的就是點(diǎn)擊子組件的input才向父組件同步值。

2017年3月24日 13:52

編輯回答

玩控

稍微改了下，代碼如下。
這問題的確簡(jiǎn)單，不過慢慢來就好。
如果想子組件到父組件通信，最常用的也是之前你代碼有的是：this.$emit('input', v) 。
不過，子組件發(fā)出了通知，父組件也需要接收，你少了接收。
@input="getDataFromChild" 這樣接收。
可以再看看 VUE 的組件通信內(nèi)容。

<!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>

2017年6月27日 03:57