vue组件使用以及组件通信小结

一、组件的使用

1、创建组件，封装要复用的标签，样式，js文件 文件名.vue 写在components中
2、引入组件
3、注册组件（全局/局部）
4、组件名当标签使用
全局

// 在mian.js里面设置  
import Vue from 'vue'  // 2、引入组件
import 组件对象 from 'vue文件路径'  // 3、注册组件 

Vue.component("组件名", 组件对象)  // 4、组件名当标签使用 
                                 //组件对象就是引入的vue文件

局部

// 在App.vue里面设置
import 组件对象 from 'vue文件路径'  //2、引入组件

export default {
    components: {  //该配置项与data平级  3、注册组件
        "组件名": 组件对象 // key与value变量名一样则可简写 
    }
}

二、在style标签上加scoped，会自动给标签添加data-v-hash值属性，所有选择都带属性选择，可使vue组件内样式只针对当前组件内标签生效。

三、组件通讯-父传子（把父组件的值传给子组件，让同结构组件显示不同数据）

1、先明确父和子是谁，谁被引入谁是儿子
2、步骤：
①在子组件内定义变量，用于接收外部传入的值

props:['变量1','变量2',...]  // 写在子组件script标签中，与data同级

②在子组件内容中把固定数值替换成变量

<template>
<div>
 <h3>{{ 变量1 }}</h3>
 <p>{{ 变量2 }}</p>
</div>
</temlate>

③到App.vue(父)中，把变量的值放入标签名（组件名）后面，相当于给形参（变量）传入实参（需要显示出来的数据），变量前面加：可传入data中的对象。

四、父传子配合for使用

1、先执行父传子基本步骤
2、在父组件App.vue data中写入需要渲染的数据

数组名：[
    {数据内容名：数据}
]

3、在组件名（标签）中写入for循环

<组件名 v-for="数组中的对象 in 数组名" ：key="对象名.id">
:变量名="对象名.数据内容名"
</组件名>

五、单向数据流：从父到子的数据流向

1、子组件修改不通知父级，造成数据不一致。
2、props里的变量，本身是只读的（不允许重新赋值）。

六、子传父

1、在子组件内绑定触发事件
2、在子组件内用 this.$emit()规定方法，主动触发事件

this.$emit('自定义事件名',参数)

、在父组件内绑定自定义事件和事件处理函数

<组件名 v-for="数组中的对象 in 数组名" ：key="对象名.id">
:变量名="对象名.数据内容名"
@自定义事件名="父methods里函数名"（传参）
</组件名>

4、子组件内，恰当时机触发父给子绑定的自定义事件，导致父methods里事件处理函数执行

methods：{
    //逻辑代码 
}