Vue组件和父子通信组件-概念组件好处: 各自独立, 便于复用,可维护性高组件: 是可复用的vue实例,封装标签

组件-概念

组件好处: 各自独立, 便于复用,可维护性高
组件: 是可复用的vue实例,封装标签,样式和js代码
组件化封装思想,把页面上可要重复的部分封装为组件,方便项目开发和维护,
- 一个页面,可以拆分成一个个组件,一个组件就是一个整体
- 每个组件可以有自己独立的结构样式和行为(html ,css 和 js)

组件的注册使用

APP.vue是根组件,比较特殊,是最大的根组件,里面还可以注册其他的组件

每个组件都是一个独立的个体,代码里面体现为一个独立的 .vue文件

使用组件的四个步骤:

创建组件,封装复用的标签,样式,js代码
引入组件
注册组件
使用组件: 组件名当成标签使用 <组件名></组件名>

注册组件

全局注册--main.js中注册

#第一步 在新建的文件里面写入内容
#第二步 在main.js注册引入
import 组件对象 from '.vue文件路径'
Vue.component('组件名', 组件对象)// 组件对象就是引入的组件
#第三步 注册完成可以在任意 .vue文件里面使用,因为是全局注册
#把组件名当标签名使用

局部注册--在某个 .vue文件里面注册

#第一步,新建文件,写入内容
#第二部,可在任意.vue 文件使用
#第三步 引入
import 组件对象 from '.vue文件路径'
export default {
components:{
    Child      //组件名和组件对象只有一个可以只写一个
}
}
#第四步,在写引入的文件本身把组件名当标签使用

关闭ESlint语法检测报错

在vue.config.js里面输入:

lintOnSave:false

组件命名规范

在组件的注册时,定义组件名的方式有两种

注册使用短横线命名法,例如 hm-header 和 hm-mian

Vue.component('hm-button', HmButton)

使用时<hm-button></hm-button>
注册使用大驼峰命名法,例如 HmHeader和 HmMain

Vue.component('HmButton', HmButton)

使用时<HmButton></HmButton> 和 <hm-button></hm-button>

注意:

定义组件名时,用大驼峰命名法,更方便

使用组件时,遵循html5规范,小写横杠隔开

组件样式冲突

默认情况下,写组件中的样式会全局生效,容易造成多个组件之间的样式冲突

全局样式:默认组件中的样式会影响到全局
局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

scoped作用

解决多个组件样式名相同,冲突问题

在当前组件的style加上scoped属性,就会在此组件的标签上加一个随机生成的data-v-hash开头的自定义属性,而且必须是当前组件的元素,才会有这个自定义属性,把属性选择器变成交集选择器

vue组件通信

父向子传值

#第一步,在父组件(App.vue)里面找到 新建的子组件文件 使用属性绑定
import 组件对象 from '.vue文件路径'
在<子组件标签 :属性1='值' :属性2='值' :属性3='值'></子组件>
#第二部 在对应的子组件(新建)文件里面使用props接收
props是个数组  props['属性1', '属性2']
#第三步 将父组件里面的属性1,属性2,... 当作 子组件里面的变量使用

组件通信-单向数据流

在vue中遵循单向数据流原则

父组件的数据发生变化时,子组件会自动跟着边
子组件不能直接修改父组件传递过来的props,只能读

组件通信-子向父

子传父: 从子组件内部把数据传出来给父组件使用或者修改父组件数据

语法:

子组件通过this$emit(事件名,参数1,参数2...)触发事件的同时传参
父组件可以给子组件注册对应的自定义事件
父组件提供对应的函数接收参数

#第一步,在新建的文件里面定义一个函数
  <div>
    <button @click="fn">修改父组件数据</button>
  </div>
子组件:this.$emit("自定义事件名1, 传值1")
methods:{
    fn(){
        this.$emit('sun',10)//把sun传入第二步里面
    }
}
#第二步,在App文件里面引入新建文件
<son @sun="fnn"></son>
父组件中: 子组件@自定义事件名1="父methods函数1"@自定义事件名2="父methods函数2"
<template>
  <div>
    <son @sun="fnn"></son>
  </div>
</template>
<script>
import Son from './components/Son.vue'
export default {
  components: { Son },
methods:{
  fnn(num){//num是子组件参数10
    console.log(num);// 打印10
  }
}
}

props类型检查

props校验: props是父传子,传递给子组件的数据,为了提高子组件被使用时的稳定性,可以进行props校验,验证传递的数据是否符合要求

默认的数组形式,不会进行校验,如果校验,要提供对象形式的props

props提供了多种数据验证方案:

基础的类型检查 Number
多个类型 [String, Number]
必填校验 required:true
默认值default: 100
自定义验证函数

语法:

props:{
    //属性名,要接收的数据:配置对象
    title:{
        //必选项,必须传过来
        required:true ,
            //类型
            type:String
            // 不传设置默认值的,一般情况下不会和required一起设置
            default:'内容'
    }
}

Vue组件 和 父子通信