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. 安装结束之后, 执行 “ npm run dev ” 启动项目即可!

开发的时候,要 保证 项目在运行中 !

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

upward337

谢谢老板~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值