Javascript vue.js中谁是孩子，谁是家长
我对Javascript vue.js中谁是孩子，谁是家长,javascript,vue.js,Javascript,Vue.js,我对Vue.js相当陌生。我做了一些关于Vue组件之间通信的简单练习。但我仍然有一个问题，谁是孩子，谁是父母。例如，我有以下代码： HTML: <body> <div id="root" class="component"> <coupon @applied="onCouponApplied"></coupon> </div> <script src="https://cdn.jsdelivr.net
Vue.jsVue <body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"
/>
<!-- <script src="app.js"></script> -->
<script src="main.js"></script>
</body>
Vue.component("coupon", {
template: `
<div>
<input palceholder="Put your name" @blur="onCouponApplied"/>
</div>
`,
data() {
return {
message: ""
};
},
methods: {
onCouponApplied() {
this.$emit("applied");
}
}
});
new Vue({
el: "#root",
methods: {
onCouponApplied() {
alert("that's work!");
}
}
});
<body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"
/>
<!-- <script src="app.js"></script> -->
<script src="main.js"></script>
</body>
Vue.component("coupon", {
template: `
<div>
<input palceholder="Put your name" @blur="onCouponApplied"/>
</div>
`,
data() {
return {
message: ""
};
},
methods: {
onCouponApplied() {
this.$emit("applied");
}
}
});
new Vue({
el: "#root",
methods: {
onCouponApplied() {
alert("that's work!");
}
}
});
Vue.component（“优惠券”{
模板：`
`,
数据（）{
返回{
信息：“
};
},
方法：{
oncouponappliced（）{
此项。$emit（“已应用”）；
}
}
});
新Vue({
el:“根”，
方法：{
oncouponappliced（）{
警惕（“这是工作！”）；
}
}
});
所以。。这里有组件
优惠券新Vue新Vuevue.js“UserListView”将有一个嵌入用户组件的列表组件。视图是列表的父级，列表可以是用户组件的父级 您的整个应用程序由组件组成每个Vue应用程序至少有一个组件是父组件（Vue实例） 您制作的其他每个组件都会成为Vue实例的直接或间接子组件。 发件人： Vue应用程序由使用新创建的根Vue实例组成 Vue，可以选择组织为嵌套的可重用组件树
根div是父级。您正在创建一个新的（
new Vue（{el:“#root”，