Vue组件通讯(props) 父传子
2018-12-19 22:03
211 查看
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./vue.js"></script> </head> <body> <div id="app"> <!-- 组件 --> <father></father> </div> <script> // 子组件 let son = { template: '<div>哇老爹给我传了{{sonmoney}}个皮肤,开森^_^</div>', // 使用props定义获取 props: ['sonmoney'] } // 创建全剧组建 // <son :sonmoney="money"></son> 和上面props: ['sonmoney']对应 Vue.component('father', { template: ` <div> <h1>瓜娃子我是你爹,我有{{money}}皮肤传给你啊</h1> <son :sonmoney="money"></son> </div> `, components: { son }, // data必须是一个函数,要返回一个新的对象 data () { return { money: 365 } } }) var vm = new Vue({ el: '#app', data: { } }) </script> </body> </html>
相关文章推荐
- vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
- Vue.js 父子组件通讯
- Vue组件中Props与v-bind之间,我遇到的问题
- Vue- 组件与props属性的用法
- vue2.0 子组件改变props值,并向父组件传值
- Vue中父子组件通讯——组件todolist
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
- Vuejs——(9)组件——props数据传递
- vue非父子组件通讯笔记(引用本地文件vue.js及vuex.js)
- vue组件封装—单属性非props的应用
- VUE+WebPack前端游戏设计:依赖VUE组件通讯机制实现场景游戏切换
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- vue.js使用props在父子组件之间传参
- vue组件通讯
- vue组件之间的数据通讯小例子
- vue父组件通过props如何向子组件传递方法详解
- Vue组件选项props
- Vue组件选项props实例详解
- Vue2.0 组件传值通讯的示例代码
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据