vue2+webpack使用2-componentA与App.vue的互相联系

Posted 码农的成长之路-Jeson

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2+webpack使用2-componentA与App.vue的互相联系相关的知识,希望对你有一定的参考价值。

环境配置:

1 安装nodejs(还未安装时) node -v npm -v 查看是否安装成功

2 npm install vue-cli -g

3 vue init webpack (项目文件夹:shift+右键 在此次打开命令窗口)

(cnpm代替npm: npm install cnpm -g --registry=https://registry.npm.taobao.org)

4 npm install

(npm install xxx --save-dev  --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西)

5 npm run dev

config/index.js 配置端口号

build/webpack.base.conf.js 改引入路径(开发引入文件时少写点层级)

如果想要本地打开(不使用服务器)

 

1 componentA.vue加载到App.vue里

1.1 componentA.vue代码

1.2 App.vue 代码

1.3 效果展示

 

2 App.vue向 componentA传递数据

2.1 App.vue 传递数据

 

<component-a msgFromFather="好好干"></component-a> 

2.2 componentA.vue

 

2.3 检测是否收到

 

3 componentA向 App.vue传递数据 

3.1 App.vue

3.2  componentA.vue

3.3检测是否实现

 

以上是关于vue2+webpack使用2-componentA与App.vue的互相联系的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue2 的 webpack 中加载 signalr.js

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

webpack+vue2.0+nodeJs搭建环境

Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结

第一章:Nodejs+vue2.0+webpack框架搭建

Vue2.0总结———vue使用过程常见的一些问题