當前位置：
首頁 >
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
發布時間：2025/4/16
22
豆豆
生活随笔
收集整理的這篇文章主要介紹了
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
組件間數據交互
父組件向子組件傳值
1. 組件內部通過props接收傳遞過來的值
2. 父組件通過屬性將值傳遞給子組件
父組件向子組件傳值-基本使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{pmsg}}</div><menu-item title='來自父組件的值'></menu-item><menu-item :title='ptitle' content='hello'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*父組件向子組件傳值-基本使用*/Vue.component('menu-item', {props: ['title', 'content'],data: function() {return {msg: '子組件本身的數據'}},template: '<div>{{msg + "----" + title + "-----" + content}}</div>'});var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',ptitle: '動態綁定屬性'}});</script> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{pmsg}}</div><menu-item :menu-title='ptitle'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*父組件向子組件傳值-props屬性名規則*/Vue.component('third-com', {props: ['testTile'],template: '<div>{{testTile}}</div>'});Vue.component('menu-item', {props: ['menuTitle'],template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>'});var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',ptitle: '動態綁定屬性'}});</script> </body> </html>
總結
以上是生活随笔為你收集整理的组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件命名方式||局部组件注册：局部组件只
- 下一篇： 组件间数据交互——父组件向子组件传值（