element实战一（vue-cli3和2区别，父子组件传值）

3.0的目录简单了很多，少了build,config两个目录。需要对webpack进行配置的话，要手动在根目录新建一个vue.config.js文件

image.png

// vue.config.js 常⽤配置
module.exports = {
// 基本路径, vue.cli 3.3以前请使用baseUrl
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
assetsDir: '',
// 生产环境sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
 },
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
proxy: {}, // 设置代理
 },
// 第三方插件配置
pluginOptions: {
// ...
 }
}

vs-code实用插件 Vue VSCode Snippets
快捷键：

• vb - 快速创建模板

一、父子组件传值

• props / $emit
  • 子组件中通过定义props接收父组件中通过v-bind绑定的数据
  • 父组件中通过监听子组件中$emit的自定义事件接收数据
• $parent / children
  • 子组件中通过this.$parent这个对象获取父组件中的数据
  • 父组件中通过this.$children这个数组获取子组件中的数据
• $ref
  • 父组件中定义子组件中的ref属性后，通过this.$refs.定义的属性名获取子组件数据

1.以props / $emit形式父组件向子组件传递值

1.1 在app.vue中注册父组件

image.png

1.2 在parent.vue中只需要
注意：如果只是绑定字符串，可以简写成 msg="from parent msg"

image.png

1.3 在Child.vue中接收

image.png

2.以props / $emit形式子组件向父组件传递值

2.1 在parent.vue中监听@ShowMsg事件

image.png

2.2在Child.vue中自定义ShowMsg事件

image.png

**3.$parent / children
父组件中：

image.png

**4. $ref
父组件中：

image.png