时间:2021-05-26
在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件。
1、安装
在桌面新建一个文件夹
$ cd 到文件中$ npm install -g vue-cli$ vue init webpack . $ npm install$ npm run devvue init webpack . 之后的选择解释
2、删除
1、删除App中的一些内容如下
2、删除components文件中的HelloWorld.vue
3、修改
修改App.vue
如下:
<template> <div id="app"> // message 定义在子组件的 props 中 <A v-bind:message="name"/> </div></template><script>import A from './components/A'export default { name: 'App', components: { A }, data(){ return{ name:"我就是数据啊" } }}</script>4、新建
在components新建A.vue并写入内容如下:
<template> <div>{{message}}</div></template><script> export default { props: ['message'] //接受message传过来的数据 }</script>5、最后
在命令行输入
$ npm run dev总结
以上所述是小编给大家介绍的vue2.0 父组件给子组件传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当
在Vue中,父子组件的关系可以总结为props向下传递,事件向上传递。父组件通过props给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的
一、父组件向子组件传递数据在Vue中,可以使用props向子组件传递数据。子组件部分:这是header.vue的HTML部分,logo是在data中定义的变量。
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:Vue2.0组件之间数据交互和通信。Vue2.0废弃了dispatch
之前在用vue写子父组件通信的时候,老是遇到问题!!!子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法