目 录
6、组件通信
安装 Vetur 插件
6.1、父子组件通信
本质:子要用父的数据!
子定义props
props就是 组件的自定义属性,也就是 组件标签上面 可以 添加的属性。
// 子组件JS里面
{
...
props: ['属性名1','属性名2','属性名3']
...
}
// 子组件模板里面
{{属性名1}}
{{属性名2}}
{{属性名3}}
父组件模板
<子组件名 属性名1="值" 属性名2="值" 属性名3="值"></子组件名>
图解
6.2、子父组件通信
子传递数据给父,换而言之,父需要使用子的数据。
父组件
// 父模板上面
<组件名 @自定义事件="父的事件函数"></组件名>
// 父JS里面
{
...
methods: {
父的事件函数(){
.....
}
}
...
}
子组件
this.$emit(‘自定义事件名’)
图解
6.3、案例展示
6.3.1、运行截图
6.3.2、案例代码
7、项目发送、启动
1、项目如何发给别人
删除 项目 目录下面的node_modules包。 压缩,发给他人即可!
2、启动别人的项目
- 解压压缩包
- 进入 项目文件夹 所在的cmd目录
- 安装 项目依赖包【cnpm i---速度快】或者【npm i---速度慢】
- 安装包结束之后, 执行 “ npm run dev ” 启动项目即可!
开发的时候,要 保证 项目在运行中 !