查看“Vue从入门到实战:杂项”的源代码
←
Vue从入门到实战:杂项
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==组件通信的其他方式== 前面介绍的组件通信的三种方式: *父组件通过prop向子组件传递数据 *子组件通过自定义事件向父组件发起通知或进行数据传递 *子组件通过<slot>元素充当占位符,获取父组件分发的内容,也可以在子组件的<slot>元素上使用v-bind指令绑定一个插槽prop,向父组件提供数据。 除此之外,还有其他实现方式 ===访问根实例=== 在每一个new Vue实例的子组件中,都可以通过$root属性来访问根实例。 <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', { 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></nowiki>
返回至
Vue从入门到实战:杂项
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息