Question

我写了一个基本的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>

什么是问题？

更新：

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

Answer 1

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

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

Answer 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'
    })

您可以直接在父模板（** welcome component ）中使用v-on:input或简写@input收听从子 form-com **组件发出的事件使用子组件的地方。

<强> HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>  <template id="form"> <div> <div class="form-control"> <label>Enter Your Name:</label> <input type="text" v-model="myInput"> </div> </div> </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

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

2 个答案: