Vue子组件如何使用v-bind绑定data数据?

<div id="app13">
    <my-input v-bind:value="say"></my-input>
</div>
<script>
    var app13 = new Vue({
            el: "#app13",
            components: {
                "my-input": {
                    props: ['say'],
                    template: "<input></input>",
                    data: function() {
                        return {
                            say: "123"
                        }
                    }
                }
            }
        });
</script>

上面的app13注册了一个组件,my-input,假如我希望input的value属性与组件的data中的say绑定,该作何做,上面的写法报错

[Vue warn]: Property or method "say" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in <Root>)

另外一种写法,官方的文档说这涉及到单项数据流的问题,子组件内部应该改变prop的值,定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

没有具体的示例,我猜想是这么写的,可是依旧报错:

<div id="app13">
    <my-input v-bind:value="say"></my-input>
</div>
<script>
var app13 = new Vue({
            el: "#app13",
            cacheText: "show text",
            components: {
                "my-input": {
                    props: ['cacheText'],
                    template: "<input></input>",
                    data: function() {
                        return {
                            say: this.cacheText
                        }
                    }
                }
            }
        });
</script>

错误:

warn — vue.js:564[Vue warn]: Property or method "say" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in <Root>)

这种写法引用了父组件的cacheText,不知道官方的文档写法是不是这个意思,this在当前指代的应该是子组件,对吧?这个请高手明示,this.cacheText应该是引用props声明的父组件的属性,对吧?
最后还有一个疑问,假设我的需求是子组件要从父组件的数据中获取初始化的值,并保持在子组件中,能够进行更新与修改,却不影响父组件的初始数据,该怎么做?就比如,my-input中的input的value是从父组件的数据中初始化过来的,但是随后的修改我希望只在子组件内有效,不影响父组件,该如何做?

回答:

子组件的自定义标签应该写成:<my-input v-bind:say=”data123″></my-input>

其中的 data123 是你的 Vue 实例中的实例数据

建议按部就班地看完 Vue 官网教程,并手敲教程中的代码加深印象。

你也可以去极客学院学习 Vue 课程,自认为属于良心之作。

回答:

https://jsfiddle.net/lincenyi…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注