Vue-组件开发

什么是组件

组件就是一个个以.vue结尾的文件，vue-cli中的App.vue就是一个根组件
组件的基本格式如下：

<template>
 
</template>
<script>
export default {
	data(){
	    return {
	      a: '小明'
	    }
	  }

}
</script>
<style>

</style>

需要注意的是，这里的数据中心data部分必须定义为函数，这是为了在组件复用时进行数据隔离

自定义组件

1. 创建vue文件
   自定义一个A组件，那么就创建一个A.vue

   <template>
       <div>A组件</div>
   </template>
   <script>
   export default {
   }
   </script>
   <style>
   
   </style>
   

2. 引入组件
   在使用组件的父组件里进行引入
   import A from './components/A.vue'
3. 注册组件

   export default {
     name: 'App',
     components: {
       HelloWorld,
       A
     }
   }
   

4. 页面使用组件

   <template>
     <A/>
   </template>
   

   父组件完整代码：

   <template>
     <!-- 使用组件 -->
     <A/>
   </template>
   
   <script>
   // 引入组件
   import A from './components/A.vue'
   
   export default {
     name: 'App',
     components: {
       // 注册组件
       A
     }
   }
   </script>
   
   <style>
   
   </style>
   

组件传值

1. 父组件传递变量给子组件
   声明变量
   父组件在使用子组件时通过自定义变量传值

   <template>
     <HelloWorld msg="Welcome to Your Vue.js App"/>
     <!-- 使用组件，传递变量x的值、动态绑定y的值为userName-->
     <A x="1" :y="userName"/>
   </template>
   

   接受变量
   子组件通过props接受变量，props可以是数组，也可以是对象
   （1）数组接受：props:['z']
   （2）对象接受
   如果props是一个对象，那么这个对象的key是自定义传入参数属性，value是希望传入的参数类型

   props:{
       x:String,
       y:String
   }
   

   还可以配置对象的参数
   ①required表示参数是否必须，默认为true
   ②default表示父组件未传值时的默认值
   ③validator对传入的值进行校验

   props:{
       props:{
       t:{
           type:Number,
           required:true
       },
       q:{
           type:String,
           required:true
       },
       s:{
           type:String,
           default: 'xxx'
       },
       u:{
           type:Number,
           default: 1000,
           validator: function(value) {
               return value < 500
           }
       }
   }
   

   使用变量
   子组件中直接进行使用，和data域中的数据使用方式相同

   <template>
       <div>A组件中获取到父组件的传值x:{{ x }}, {{ y }}</div>
       <B :z="y"/>
   </template>
   

2. 子组件修改父组件的参数
   子组件不可以直接修改父组件的值，只能传出一个自定义事件，父组件通过调用这个自定义事件后，然后在外部修改值
   
   子组件通过$emit()定义事件：

   <template>
       <div>
           <button type="button" @click="add">按我加1</button>
       </div>
   </template>
   <script>
   export default{
       methods:{
           add(){
               //定义一个doAdd事件
               this.$emit("doAdd")
           }
       }
   }
   </script>
   

   父组件监听自定义的事件：

   <template>
     <!-- 显示逻辑,证明子组件确实修改了父组件传递的值-->
     <C :num="num"/>
     <!-- 监听自定义的doAdd事件-->
     <D :num="num" @doAdd="sum"/>
   </template>
   
   <script>
   import C from './components/C.vue'
   import D from './components/D.vue'
   
   export default {
     name: 'App',
     components: {
       C,
       D
     },
     data() {
       return {
         num: 0
       }
     },
     methods:{
       //doAdd事件的执行逻辑
       sum(){
         this.num++;
       }
     }
   }
   </script>
   
   <style>
   
   </style>