Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

目   录

6、组件通信

安装 Vetur 插件

6.1、父子组件通信

子定义props

父组件模板

图解

6.2、子父组件通信

父组件

子组件

图解

6.3、案例展示

6.3.1、运行截图

6.3.2、案例代码

7、项目发送、启动

1、项目如何发给别人

2、启动别人的项目

---

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、启动别人的项目

1. 解压压缩包
2. 进入 项目文件夹 所在的cmd目录
3. 安装 项目依赖包【cnpm i---速度快】或者【npm i---速度慢】
4. 
5. 安装包结束之后， 执行 “ npm run dev ” 启动项目即可！
6. 

开发的时候，要 保证 项目在运行中 ！