522 父子元件的訪問方式： $children、$refs、$parent
阿新 • • 發佈：2020-08-23
父子元件的訪問方式： $children、$refs
父子元件的訪問方式： $children
父子元件的訪問方式： $refs
元件訪問-父訪問子-children-refs.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> <my-cpn></my-cpn> <y-cpn></y-cpn> <cpn ref="aaa"></cpn> <button @click="btnClick">按鈕</button> </div> <template id="cpn"> <div>我是子元件</div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { btnClick() { // 1.$children // console.log(this.$children); // for (let c of this.$children) { // console.log(c.name); // c.showMessage(); // } // console.log(this.$children[3].name); // 2.$refs => 物件型別, 預設是一個空的物件，ref='bbb' 【以物件結構儲存所有子元件】 console.log(this.$refs.aaa.name); } }, components: { cpn: { template: '#cpn', data() { return { name: '我是子元件的name' } }, methods: { showMessage() { console.log('showMessage'); } } }, } }) </script> </body> </html>
父子元件的訪問方式： $parent
元件訪問-子訪問父-parent-root
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是cpn元件</h2> <ccpn></ccpn> </div> </template> <template id="ccpn"> <div> <h2>我是子元件</h2> <button @click="btnClick">按鈕</button> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, components: { cpn: { template: '#cpn', data() { return { name: '我是cpn元件的name' } }, components: { ccpn: { template: '#ccpn', methods: { btnClick() { // 1.訪問父元件$parent // console.log(this.$parent); // console.log(this.$parent.name); // 2.訪問根元件$root console.log(this.$root); console.log(this.$root.message); } } } } } } }) </script> </body> </html>