vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
2023-09-11 14:15:30 时间
axios 用法:
1.安装
npm install axios --save-dev
2.导入
import axios from 'axios';
3.使用
axios.post(url,params) .then(function(res){ console.log(res); alert(res.data); }) .catch(function(err){ console.log(err); })
4. vue2.0 子组件和父组件之间的传值
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中的属性。抓准这两点对于父子通信就好理解了
.
相关文章
- Vue.js快速介绍-超级马里奥像素艺术
- Vue.js 开发实践:实现精巧的无限加载与分页功能
- JS框架_(Vue.js)带有星期日期的数字时钟
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue生命周期
- baguetteBox.js响应式画廊插件(纯JS)
- [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js3: 使用element-plus的icon图标(vue@3.2.37 / @element-plus/icons-vue@2.0.6)
- 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
- @vue/cli 4.5.13:创建一个vue.js3.x项目(vue.js 3.2.4)
- vue.js 入门精要
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- Vue入门教程:node安装vue命令行工具及启动项目
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue项目JS播放音频音效和背景音乐
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- 将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩
- 如何在Vue组件中调用封装好的外部js文件方法
- Vue中vue-i18n结合vant-ui实现国际化
- 061:vue+openlayer画点、线、圆、多边形( 代码示例 )
- Vue学习笔记——vue-router