Vue组件化开发介绍

组件化开发

App.vue-根组件

项目看到的内容在此处编写

<template><div class="App">我是APP<HelloWorld></HelloWorld><buttonVue></buttonVue></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
export default {components:{HelloWorld}
};
</script><style></style>

template：结构

！结构中只有一个根节点

script：js逻辑

在这里data是特殊的，data必须是一个函数，这样保证每一个组件实例单独创建

<script> data(){ return { count:999 } } </script>

style：样式（可装包支持less）

普通组件注册

写导入时，要在顶部编写

局部注册

只能在注册的组件内使用

1. 创建.vue文件（三个组成部分）

2. 在使用的组件内导入并注册

//导入需要注册的组件
import 组件对象 from '.vue文件路径'
import Hmheader from './components/HmHeader'
export default {
//局部注册
components:{ '组件名':组件对象，HmHeader,}
}

全局注册

所有组件内均可使用

在main.js中注册

import buttonVue from './components/buttonVue.vue'
Vue.component('buttonVue',buttonVue)

scoped样式冲突

vue组件中的style样式会默认作用到全局，需要给当前style加上scoped属性，如此只会作用于当前组件：

<style scoped> //css样式
</style>

组件通信

父子关系

props：父传子

//1.给子组件添加属性的方式传值 
<son :title="mytitle"><son> 
//2. 子组件内部通过props接收 
//子组件文件内部： 
export default { props:['title'] }

子组件接收到的是一个数组。所以，可以在父组件内设置多个data数据，给子组件设置多个属性，统一传值。

任意数量，任意类型

可以在子组件内设置类型校验（类似TS语法）：age:Number（String,Boolean···）

如果不符合，自动报错

//父组件内 
<Son :name="name" :age="age" :gender="gender" > 
</Son> data(){ return{ name:'123', age:'12', gender:'female' } } //子组件内： export default{ props:['name','age','gender'] }

$emit：子传父

emit是一个实例方法

子组件内：

export default { methods:{ emit(){ //this.$emit('自定义事件名',信息) this.$emit('changeTitle',信息)}}
}

父组件内：

//给相应盒子添加事件监听后：
/* 添加自定义事件监听 
<son :title="msg" @changeTitle="lalala"> </son> 
*/ 
//接收逻辑： 
export default {data(){methods:{lalala(newmsg){ this.msg=newmsg }
} } }

非父子关系

event bus事件总线

简易场景的非父子组件通信

1. 创建一个都能访问到的空事件总线

//创建一个新的js文件
import Vye from 'vue' 
const But = new Vue() 
export default Bus

1. A组件（接收方）进行Bus的监听

export default{created(){Bus.$on('sendMsg',(msg)=>{ //操作 })}
}

1. B组件发布消息（触发事件）

methods:{clickSend(){Bus.$emit('SendMsg','要发送的信息')} 
}

provide&inject

跨层级共享数据

通用：Vuex

Prop

定义：组件上的自定义属性

作用：向子组件传递数据

pros校验

可以为组件的prop指定类型，不符合要求出现错误提示：

-类型校验

props:{ age:Number }

-完整校验

props:{ 属性名:{ type:类型，required:true, default:默认值, validator(value){ //自定义校验逻辑 return 是否通过校验//返回布尔值 } 
} }