Vue组件化开发介绍

组件化开发

App.vue-根组件

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

javascript 复制代码

<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必须是一个函数，这样保证每一个组件实例单独创建

javascript 复制代码

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

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

普通组件注册

写导入时，要在顶部编写

局部注册

只能在注册的组件内使用

创建.vue文件（三个组成部分）
在使用的组件内导入并注册

javascript 复制代码

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

全局注册

所有组件内均可使用

在main.js中注册

javascript 复制代码

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

scoped样式冲突

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

javascript 复制代码

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

组件通信

父子关系

props：父传子

javascript 复制代码

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

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

任意数量，任意类型

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

如果不符合，自动报错

javascript 复制代码

//父组件内 
<Son :name="name" :age="age" :gender="gender" > 
</Son> 

data(){ return{ name:'123', age:'12', gender:'female' } } 

//子组件内： 

export default{ props:['name','age','gender'] }

$emit：子传父

emit是一个实例方法

子组件内：

javascript 复制代码

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

父组件内：

javascript 复制代码

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

非父子关系

event bus事件总线

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

provide&inject

跨层级共享数据

通用：Vuex

Prop

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

作用：向子组件传递数据

pros校验

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

-类型校验

javascript 复制代码

props:{ age:Number }

-完整校验

javascript 复制代码

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