超奇葩的Vue问题，难道是bug ?

自由小菜园 2019-04-07 01:33:54





<body>



    <div id="app">

         <custom-input v-model="something"></custom-input>

         <br />

         {{something}}

    </div>





    <script src="//unpkg.com/vue/dist/vue.js"></script>

    <script src="//unpkg.com/element-ui@2.7.0/lib/index.js"></script>

    <script type="text/javascript">

        Vue.component('custom-input', {

            props: ['something'],

            data() {

                return { otherdata: 'hellow' };

            },

            template: '<input type="text" v-bind:value="something"  v-on:input="updateValue($event.target.value)" v-bind:y="otherdata"/>',

            methods: {

                updateValue: function (value) {               

                    this.$emit('input', parseInt(value) + 1);

                    this.otherdata = value; //问题所在语句    

                }

            }

        })

        var vm = new Vue({

            el: '#app',

            data: {

                something: '0'

            }



        })

    </script>

</body>

移动到文本框，无论怎么输入，文本框就是看不到按下的信息，譬如输入数字2，但是文本框看不到2，除非去掉带注释的那个语句

...全文

325 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

scscms太阳光 2019-04-10

打赏
举报

<custom-input v-model="something"></custom-input>之后在custom-input组件里，其实props: ['something'],这个是错误的。
在组件内根本不存在something变量，使用了v-model组件唯一能访问到的是this.$attrs.value它即是父组件的something变量。
因此你在子组件里使用v-bind:value="something"它永远是一个undefined，所以输入框里一直显示不了值。
而你认为的 this.otherdata = value; //问题所在语句它表示比窦娥还冤。

解决方法就如楼上说的：删除v-bind:value="something" 或者改成 v-bind:value="this.$attrs.value"

另说明：使用v-model时，子组件里只有第一个标签才会绑定默认值。如果你的子组件模板不是只有一个input标签的，比如是template: '<div><input type="text" /></div>', 那么你就必须要手动绑定默认值了。