ホームページ > 記事 > ウェブフロントエンド > Vueコンポーネントの親と子間の通信について詳しく解説
この記事は主に Vue コンポーネント間の通信に関する関連情報を詳しく紹介していますので、興味のある方は参考にしていただければ幸いです。
3. コンポーネント間通信($parent $refs)
親コンポーネントが子コンポーネントのデータを取得したい場合
①子コンポーネントを呼び出す際にref属性を指定する
< ;child-component ref="mySon">53b801b01e70268453ed301cb998e90c
②指定された参照の名前に従って子コンポーネントのインスタンスオブジェクトを検索します
this.$refs.mySon
If子コンポーネントが親コンポーネントを取得したい データ:
①
this.$parent
を直接読み込む this.$refs
を通して子コンポーネントのデータを取得する コード:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件间通信-01</title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <dahua></dahua> </p> <script> //vue提供的ref Vue.component("dahua",{ data:function(){ return{ mySonName:"" } }, methods:{ //通过$refs拿到指定的所引用的对应的组件的实例对象 getSonName:function(){ this.mySonName = this.$refs.mySon.name; } }, template:` <p> <h1>这是父组件</h1> <button @click = "getSonName">获取子组件数据</button> <span>{{mySonName}}</span> <hr> <xiaohua ref="mySon"></xiaohua> </p> ` }) // 创建子组件 Vue.component("xiaohua",{ data:function(){ return{ name:"小花" } }, template:` <h1>这是子组件</h1> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
子コンポーネント$parent
を介して親コンポーネントのデータを取得します
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件间通信-02</title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <dahua></dahua> </p> <script> //创建子组件 Vue.component("dahua",{ data:function(){ return{ myName:"大花" } }, template:` <p> <h1>这是父组件</h1> <hr> <xiaohua></xiaohua> </p> ` }) //创建子组件 Vue.component("xiaohua",{ data:function(){ return{ msg:"" } }, template:` <p> <h1>这是子组件</h1> <p>{{msg}}</p> </p> `, created:function(){ //在子组件创建完成时获取父组件的数据 //保存在msg中在p标签中显示 this.msg = this.$parent.myName; } }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
関連推奨事項:
react.js 親子コンポーネントのデータバインディングのリアルタイム通信の例の表示
以上がVueコンポーネントの親と子間の通信について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。