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

我编写了一个基本的VUEJS2基本示例来测试嵌套组件

下面是组件和模板结构

Vue.component（'form-com'{
模板：“#表格”，
道具：['value']，
方法：{
onInput：函数（事件）{
这是.emit（'input'，event.target.value）；
}
}
});
Vue.component（'message-com'{
模板：“#消息”，
数据：函数（）{
返回{
味精：“你好”
}
},
道具：[“用户”]
});
Vue.component（'welcome-com'{
模板：“#欢迎”，
数据：函数（）{
返回{
用户：“ahmad”
}
}
});
新Vue({
el:“#容器”
})

输入您的姓名：
{{msg}{{user}}

组件“welcome com”中缺少

值

对象：

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

---

组件“欢迎com”中缺少

值

对象：

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

---

在表单com组件中，您可以设置一个绑定输入值的

v-model

，并设置一个观察者来观察输入中的变化，该观察者反过来发出一个通知，告知父组件发生了变化

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

您可以在使用子组件的父模板（**欢迎组件）中直接使用

v-on:input

或速记

@input

收听子组件发出的事件

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> 

输入您的姓名：
{{msg}{{user}}

这是你的电话号码

---

如果你不想使用观察者，那么你可以使用。查看在您的表单com组件中使用计算设置器的组件。您可以设置一个绑定输入值的

v-model

，并设置一个观察者来观察输入中的更改，从而发出一个通知，告知父组件发生了更改

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

您可以在使用子组件的父模板（**欢迎组件）中直接使用

v-on:input

或速记

@input

收听子组件发出的事件

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> 

输入您的姓名：
{{msg}{{user}}

这是你的电话号码

---

如果你不想使用观察者，那么你可以使用。请查看正在使用计算机设置器的问题已解决且错误已消除。但是现在，当在输入上输入一些字符时，{msg}并没有改变。这一个有什么问题？您从未声明您的

msg

应该改变。也许用你想要达到的目标来回答另一个问题。我误解了前面的评论。我是说{user}param。我想通过输入文本更改

用户

，问题已解决，错误已消除。但是现在，当在输入上输入一些字符时，{msg}并没有改变。这一个有什么问题？您从未声明您的

msg

应该改变。也许用你想要达到的目标来回答另一个问题。我误解了前面的评论。我是说{user}param。我想通过输入文本更改

用户