“Vue从入门到实战:杂项”的版本间的差异
来自CloudWiki
第106行: | 第106行: | ||
}, | }, | ||
template: '<button @click="accessParent">访问父组件实例</button>' | template: '<button @click="accessParent">访问父组件实例</button>' | ||
+ | }) | ||
+ | |||
+ | new Vue({ | ||
+ | el: '#app', | ||
+ | |||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
+ | </html></nowiki> | ||
+ | |||
+ | ===访问子组件实例或子元素=== | ||
+ | 在Vue.js中,父组件要访问子组件实例或子元素,可以给子组件或子元素添加一个特殊的属性ref, 为子组件或子元素分配一个引用ID ,然后父组件就可以通过$ref属性来访问子组件实例或子元素。 | ||
+ | |||
+ | <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', { | ||
+ | mounted(){ | ||
+ | // 访问子元素<input>,让其具有焦点 | ||
+ | this.$refs.inputElement.focus(); | ||
+ | // 访问子组件<child>的message数据属性 | ||
+ | console.log(this.$refs.childComponent.message) | ||
+ | }, | ||
+ | template: ` | ||
+ | <div> | ||
+ | <input ref="inputElement"><br> <!--子元素--> | ||
+ | <child ref="childComponent"></child> <!-- 子组件--> | ||
+ | </div>` | ||
+ | }); | ||
+ | Vue.component('child', { | ||
+ | data(){ | ||
+ | return { | ||
+ | message: 'Vue.js无难事' | ||
+ | } | ||
+ | }, | ||
+ | template: '<p>{{message}}</p>' | ||
}) | }) | ||
2021年2月18日 (四) 14:28的版本
组件通信的其他方式
前面介绍的组件通信的三种方式:
- 父组件通过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>
访问子组件实例或子元素
在Vue.js中,父组件要访问子组件实例或子元素,可以给子组件或子元素添加一个特殊的属性ref, 为子组件或子元素分配一个引用ID ,然后父组件就可以通过$ref属性来访问子组件实例或子元素。
<!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', { mounted(){ // 访问子元素<input>,让其具有焦点 this.$refs.inputElement.focus(); // 访问子组件<child>的message数据属性 console.log(this.$refs.childComponent.message) }, template: ` <div> <input ref="inputElement"><br> <!--子元素--> <child ref="childComponent"></child> <!-- 子组件--> </div>` }); Vue.component('child', { data(){ return { message: 'Vue.js无难事' } }, template: '<p>{{message}}</p>' }) new Vue({ el: '#app', }) </script> </body> </html>