“Vue从入门到实战：杂项”的版本间的差异
来自CloudWiki
（创建页面，内容为“==组件通信的其他方式== 前面介绍的组件通信的三种方式： *父组件通过prop向子组件传递数据 *子组件通过自定义事件向父组…”） |
|||
| 第53行： | 第53行： | ||
} | } | ||
} | } | ||
| + | }) | ||
| + | </script> | ||
| + | </body> | ||
| + | </html></nowiki> | ||
| + | |||
| + | 不管组件是根实例的子组件，还是更深层级的后代组件，$root属性总是代表了根实例。 | ||
| + | |||
| + | ===访问父组件实例=== | ||
| + | 和$root类似，$parent属性用于在一个子组件访问父组件的实例。这可以替代父组件将数据以 prop 的方式传入子组件的方式。 | ||
| + | |||
| + | 在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。 | ||
| + | |||
| + | <nowiki> | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <title></title> | ||
| + | <script src="vue.js"></script> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div id="app"> | ||
| + | <parent></parent> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | Vue.component('parent', { | ||
| + | data(){ | ||
| + | return { | ||
| + | price: 98 | ||
| + | } | ||
| + | }, | ||
| + | computed: { | ||
| + | totalPrice(){ | ||
| + | return this.price * 10; | ||
| + | } | ||
| + | }, | ||
| + | methods: { | ||
| + | hello(){ | ||
| + | return "Hello, Vue.js无难事"; | ||
| + | } | ||
| + | }, | ||
| + | template: '<child></child>', | ||
| + | }); | ||
| + | Vue.component('child', { | ||
| + | methods: { | ||
| + | accessParent(){ | ||
| + | console.log("单价：" + this.$parent.price); | ||
| + | console.log("总价：" + this.$parent.totalPrice); | ||
| + | console.log(this.$parent.hello()); | ||
| + | } | ||
| + | }, | ||
| + | template: '<button @click="accessParent">访问父组件实例</button>' | ||
| + | }) | ||
| + | |||
| + | new Vue({ | ||
| + | el: '#app', | ||
| + | |||
}) | }) | ||
</script> | </script> | ||
</body> | </body> | ||
</html></nowiki> | </html></nowiki> | ||
2021年2月18日 (四) 11:09的版本
组件通信的其他方式
前面介绍的组件通信的三种方式：
- 父组件通过prop向子组件传递数据
- 子组件通过自定义事件向父组件发起通知或进行数据传递
- 子组件通过<slot>元素充当占位符，获取父组件分发的内容，也可以在子组件的<slot>元素上使用v-bind指令绑定一个插槽prop，向父组件提供数据。
除此之外，还有其他实现方式
访问根实例
在每一个new Vue实例的子组件中，都可以通过$root属性来访问根实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script>
Vue.component('parent', {
template: '<child></child>'
});
Vue.component('child', {
methods: {
accessRoot(){
console.log("单价：" + this.$root.price);
console.log("总价：" + this.$root.totalPrice);
console.log(this.$root.hello());
}
},
template: '<button @click="accessRoot">访问根实例</button>'
})
new Vue({
el: '#app',
data: {
price: 98
},
computed: {
totalPrice(){
return this.price * 10;
}
},
methods: {
hello(){
return "Hello, Vue.js无难事";
}
}
})
</script>
</body>
</html>
不管组件是根实例的子组件，还是更深层级的后代组件，$root属性总是代表了根实例。
访问父组件实例
和$root类似，$parent属性用于在一个子组件访问父组件的实例。这可以替代父组件将数据以 prop 的方式传入子组件的方式。
在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script>
Vue.component('parent', {
data(){
return {
price: 98
}
},
computed: {
totalPrice(){
return this.price * 10;
}
},
methods: {
hello(){
return "Hello, Vue.js无难事";
}
},
template: '<child></child>',
});
Vue.component('child', {
methods: {
accessParent(){
console.log("单价：" + this.$parent.price);
console.log("总价：" + this.$parent.totalPrice);
console.log(this.$parent.hello());
}
},
template: '<button @click="accessParent">访问父组件实例</button>'
})
new Vue({
el: '#app',
})
</script>
</body>
</html>
