首页 文章

在vue js 2嵌套组件中的实例上未定义属性或方法“value”

提问于
浏览 次
1

我写了一个基本的vue js 2基本示例来测试嵌套组件 .

下面是组件和模板结构 .

Vue.component('form-com', {
        template: '#form',
        props: ['value'],
        methods: {
            onInput: function (event) {
                this.$emit('input', event.target.value);
            }
        }
    });

    Vue.component('message-com', {
        template: '#message',
        data: function () {
            return {
                msg: 'Hello'
            }
        },
        props: ['user']
    });

    Vue.component('welcome-com', {
        template: '#welcome',
        data: function () {
            return {
                user: 'ahmad'
            }
        }
    });

    new Vue({
        el: '#container'
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<!--Form Template-->
<template id="form">
    <div>
        <div class="form-control">
            <label>Enter Your Name:</label>
            <input type="text" v-bind:value="value" :input="onInput">
        </div>
    </div>
</template>

<!--Hello Message Template-->
<template id="message">
    <div>
        <h3>{{msg}} {{user}}</h3>
    </div>
</template>

<template id="welcome">
    <div>
        <form-com :value="value"></form-com>
        <br>
        <message-com :user="user"></message-com>
    </div>
</template>

<div id="container">
    <welcome-com></welcome-com>
</div>

但是当在浏览器中运行app时会显示以下错误：

[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <WelcomeCom>
       <Root>

什么问题？

更新：

我只是从Learning Vue.js 2的一章重写了this Fiddle . 我只是重命名一些参数和组件和模板名称 . 但是当我将主要小提琴复制到我的代码中时，一切都运转了 .

javascript vue.js vuejs2

2 回答

  • 2

    在 form-com 组件中，您可以设置一个 v-model ，它绑定输入值并设置一个watcher来观察输入中的更改，这些更改又会发出一个custom-event，它会调用发生更改的父组件 .

    Vue.component('form-com', {
        template: '#form',
        data(){
            return{
                myInput:''
            }
        },
        watch: {
            myInput: function (inputVal) {
                this.$emit('input', inputVal);
            }
        }
    });

    Vue.component('message-com', {
        template: '#message',
        data: function () {
            return {
                msg: 'Hello'
            }
        },
        props: ['user']
    });

    Vue.component('welcome-com', {
        template: '#welcome',
        data: function () {
            return {
                user: 'ahmad'
            }
        },
        methods:{
            updateUser(value){
                this.user = value;
            }
        }
    });

    new Vue({
        el: '#container'
    })

    您可以侦听使用子组件的子 **form-com ** component using v-on:input or shorthand @input directly in the parent template (welcome component ）发出的事件 .

    HTML

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<!--Form Template-->
<template id="form">
    <div>
        <div class="form-control">
            <label>Enter Your Name:</label>
            <input type="text" v-model="myInput">
        </div>
    </div>
</template>

<!--Hello Message Template-->
<template id="message">
    <div>
        <h3>{{msg}} {{user}}</h3>
    </div>
</template>

<template id="welcome">
    <div>
        <form-com @input="updateUser($event)" ></form-com>
        <br>
        <message-com :user="user"></message-com>
    </div>
</template>

<div id="container">
    <welcome-com></welcome-com>
</div>

    这是jsFiddle

    如果您不想使用观察者，那么您可以使用computed setter来完成 . 看一下使用计算机设定器的fiddle

    回复于
  • 2

    组件'welcome-com'中缺少 value 对象：

    Vue.component('welcome-com', {
        template: '#welcome',
        data: function () {
            return {
                value: '',
                user: 'ahmad'
            }
        }
    });
    回复于

相关问题