vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+ 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用 但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。 有时候我们需要父组件直接访问子组件、子组件直接访问父组件，或者子组件访问根组件： children很特别，查阅资料可以发现： 点击（父组件）按钮之后： 我们还可以通过循环拿到所有子组件数据： 点击（父组件）按钮之后： 因为是数组，所以我们可以通过比如： 所以我们可以用vue-DOM之光： 点击（父组件）按钮之后： 为什么叫“DOM之光”呢？因为它和原生JS中的 如法炮制： 图中el属性在有些浏览器（或添加了vue插件）会显示未Vue？ （但是在实际中
$on()、$emit() ，如图：
$emit将数据从子组件传到父组件，以此循环引用。
$children或$refs reference$parent
父子组件的访问方式之：$children
this.$children是一个数组类型，它包含了所有子组件对象： <body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc></mxc> <button @click="btnClick">颤抖吧</button> </div> <template id="mxc"> <div>我是子组件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$children) } }, components:{ mxc:{ template:'#mxc', methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
<body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc></mxc> <button @click="btnClick">颤抖吧</button> </div> <template id="mxc"> <div>我是子组件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$children) for(let c of this.$children){ console.log(c.name) } } }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是子组件的name' } }, methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
this.$children[2]来拿到第三个子组件的数据。
但是这么做有一个问题：比如开发时突然在这三个子组件中又插入了一个子组件（可能相同，也可能不同），这时候【2】就不再是我们需要的了。。。$refs ： <body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc ref="aaa"></mxc> <button @click="btnClick">颤抖吧</button> </div> <template id="mxc"> <div>我是子组件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$refs) console.log(this.$refs.aaa) } }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是子组件的name' } }, methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
document.querySelector('xxx')功能一样，它可以在vue中获取元素/匹配组件
子访问父：$parent
<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div>我是子组件啊</div> <button @click="btnClick">更加颤抖的child</button> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, components:{ mxc:{ template:'#mxc', methods:{ btnClick(){ console.log(this.$parent) } } } } }) </script> </body>
因为当前子组件的父组件就是vue实例啊！$parent用的非常少——考虑到耦合度的原因）
子组件访问根组件：$root
<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div> <div>我是mxc组件</div> <cdn></cdn> </div> </template> <template id="mxca"> <div> <div>我是子子组件啊</div> <button @click="btnClick">巨颤祖child</button> </div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是中间子组件的name' } }, components:{ cdn:{ template:'#mxca', methods:{ btnClick(){ console.log(this.$parent.name) console.log(this.$root.message) } } } } } } }) </script> </body> 
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
