Vue2.0子父组件通信
来源:互联网 发布:建筑软件班太原 编辑:程序博客网 时间:2024/05/16 03:43
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题
首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)
环境搭建步骤:
- 打开git ,运行 npm install –global vue-cli 这是安装vue的命令行
- vue init webpack vue-demo 这是vue基于webpack的模板项目
- cd vue-demo 进入vue-demo文件夹
- npm install 安装package.json中依赖的node_modules
- npm run dev 运行该项目
刚刚我们创建的是vue基于webpack工具的一个模板项目,对于webpack和热加载这些不熟悉的同学不必在意,我们现在不会过多关注webpack的,不过建议对vue有兴趣的同学还是去了解一下webpack,它也算是vue开发中的一个必备工具
接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样
一.父组件向子组件传值
1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性
3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
4.保存修改的文件,查看浏览器
5.我们依然可以对message的值进行v-bind动态绑定
此时浏览器中
父组件向子组件传值成功
总结一下:
- 子组件在props中创建一个属性,用以接收父组件传过来的值
- 父组件中注册子组件
- 在子组件标签中添加子组件props中创建的属性
- 把需要传给子组件的值赋给该属性
二.子组件向父组件传值
1.在子组件中创建一个按钮,给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
4.保存修改的文件,在浏览器中点击按钮
子组件向父组件传值成功
总结一下:
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
http://www.jianshu.com/p/2670ca096cf8
阅读全文
0 0
- Vue2.0子父组件通信
- Vue2.0子父组件通信
- Vue2.0子父组件通信
- vue2.0 组件通信
- Vue2.0 组件通信
- Vue2.0组件之间通信
- vue2.0中的组件通信
- Vue2.0组件之间通信
- Vue2.0组件之间通信
- Vue2.0 子组件传值给父组件
- vue2.0子组件调用父组件的数据
- vue2.0子组件调用父组件的数据
- Vue2.0组件通信(非Vuex)
- vue2.0--组件通信(非vuex法)
- Vue2.0 父子组件之间通信
- vue2.0父子组件通信(慕课网)
- vue2.0——管理组件通信
- vue2.0父子组件间通信
- LeetCode 371. Sum of Two Integers (递归、半加器)
- https和http
- 非法字符空字符的过滤
- CountdownTimer倒计时
- 如何操作代码托管到GitHub
- Vue2.0子父组件通信
- 产生25个int类型的随机数。对于每一个随机值,使用if-else语句来将其分类为大于、小于或等于紧随它而随机生成的值。
- 【教程】将Java条形码添加到PDF文档的两种方法
- Android vector标签 PathData 画图超详解
- 深入理解MVC
- Vlc部分功能
- Vuejs(15)——Vue的异步组件
- IntelliJ IDEA开发Spark、打JAR包
- idea使用心得