vue.js中的父子组件通信与项目发送

1、组件通信

1.1、父子组件通信

• 本质： 子要用父的数据！

• 实现：

  • 子定义props。 props就是组件的自定义属性，也就是组件标签上面可以添加的属性

    // 子组件JS里面
    {
      ...
    	props:['属性名1','属性名2','属性名3']
    	...
    }
    

    // 子组件模板里面
    {{属性名1}}
    {{属性名2}}
    {{属性名3}}
    

  • 父组件模板里面

    <子组件名 属性名1="值"  属性名2="值"  属性名3="值"></子组件名>
    

• 图解：
  

2.2、子父组件通信

• 子传递数据给父，换而言之 父需要使用子的数据。

• 实现

  • 父组件里面

    // 父模板上面
    <组件名  @自定义事件="父的事件函数"></组件名>
    

    // 父JS里面
    {
    	...
    	methods:{
    		 父的事件函数(){
    		     .....
    		 }
    	}
    	...
    }
    

  • 子组件里面

    this.$emit(‘自定义事件名’)

• 图解

• 传参

2、项目发送、启动

2.1、项目如何发给别人

• 删除项目目录下面的node_modules 包。 然后压缩，发给他人即可！

2.2、启动别人发给你的项目

• 解压压缩包
• 进入项目文件夹所在的cmd目录
• 安装项目依赖包 cnpm i 或者 npm i
• 安装包结束之后， 执行 npm run dev 启动项目即可！

注：开发的时候要保证项目在运行中