vue组件开发

vue有两大特点：数据驱动与组件化开发，其中组件开发是vue灵活的核心，
所谓组件开发就是将页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。使得组件资源独立，所以可以复用。利于开发以及维护。

1.创建组件

vue项目是由一个主组件包含数个子组件，子组件的创建就是创建.vue文件。
例如：我们首先创建一个文件夹components（命名没有规定）来存储所有组件，然后创建一个.vue文件myFirstComponent.vue。

2.注册组件

创建好子组件后，在使用之前需要将其引入到父组件之中，然后进行注册，vue提供了全局注册以及局部注册两种方式。

全局注册

//1.引入需要注册的全局组件
import myFirst from './components/myFirstComponent'
//全局注册  在mainjs里面进行注册  叫全局注册  
//整个项目的组件都可以使用   
//注册给整个vue对象
//在vue类的方法 component里面进行注册
Vue.component("v-myFirst",myFirst);

局部注册

引入的位置是父组件的<script></script>中

<script>
// 组件在谁里面使用  在谁里面注册   这中注册方式叫局部注册
//局部注册的组件只能在父组件里面使用
//1.在script里面引入
import myFirst from './components/myFirstComponent'
//2.注册组件  在属性components里面进行注册
//常规写法  键值的形式  
//简写  直接使用组件变量  键和值一样的时候可以直接简写
export default {
 data() {
  return {

  }
 },
 components: {
   "v-myFirst",myFirst
 }
}
</script>

3.使用组件

前两步完成之后，子组件的使用很简单，使用第二步注册的组件名，类似于标签的用法，直接使用在父组件内部<v-myFirst></v-myFirst>。

<template>
 <div class="container">
    <v-myFirst></v-myFirst>
 </div>
</template>

组件开发所需的基础知识可以参考vue基础知识

子父组件通信

props

创建父组件parent.vue

<template>
<!-- 父组件将数据动态绑定-->
  <p :title="parent" :data="this">父组件parent</p>
  <v-child></v-child>
</template>
<script>
//引入并注册子组件
import child from './components/child '
name:"parent",
components(){
	"v-child":child
}
</script>
<style>
</style> 

创建子组件child.vue

<template>
  <p>子组件child</p>
</template>
<script>
	name:"child",
	props:{
		title:String,//获取到了父组件的title
		data:Object//子组件获取到了父组件对象
	}
</script>
<style>
</style> 

$eimt 和v-on事件车

创建父组件parent.vue
父组件的自定义事件在子组件内部触发，首先需要在父组件上进行监听处理
v-on

<template>
  <p v-on:parentevent="doSomething">父组件parent</p>
  <v-child></v-child>
</template>
<script>
//引入并注册子组件
import child from './components/child '
name:"parent",
components(){
	"v-child":child
},
methods(){
	doSomething(){
		console.log("父组件的事件");
	}
}
</script>
<style>
</style> 

创建子组件child.vue,子组件触发父组件事件使用$emit

<template>
  <p>子组件child</p>
  <button @click="getData"></button>
</template>
<script>
name:"child",
	methods{
		getData(){
			this.$emit("parentevent");
		}
	}
</script>
<style>
</style> 

使用事件车也可以实现非子父组件之间通信

创建left.vue组件

<template>
 <div class="left">
我是left区域
<button @click="sendtoRight">点击我给right区域传值</button>
 </div>
</template>
<script>
export default {
 data() {
  return {

  }
 },
 methods: {
     sendtoRight(){
     //发送数据  发送自定义事件以及数据
         this.Emitevent.$emit("leftevent",{
             name:"张三",
             age:"20"
         });
     }
 },
 mounted() {
     //this.EmitEvent  是new  vue对象
     //该组件渲染完成之后自动监听right区域事件
     this.Emitevent.$on("rightevent",(result)=>{
         console.log(result);
     })
 }
}
</script>

创建right.vue组件

template>
 <div class="sys-content">
我是右边内容区域
<button @click="sendToLeft">点击我给left区域传递数据</button>
 </div>
</template>

<script>

export default {
 data() {
  return {

  }
 },
 mounted() {
 //该组件渲染完成之后自动监听left区域事件
     this.Emitevent.$on("leftevent",(result)=>{
         console.log(result);
     })
 },
 methods: {
 //发送数据  发送自定义事件以及数据
     sendToLeft(){
         this.Emitevent.$emit("rightevent","abcd");
     }
 }
}
</script>