VUE项目组件的使用

1.创建组件

vue项目生成后会会生成很多文件

找到res下的components文件就是放组件的文件

新建一个后缀为vue的文件写入

<template>
    <div>
        我是一个组件
    </div>
</template>

好了已经创建了一个简单的组件

2.引入组件

找到res下的views文件找到要使用组件的路由

<template>
  <div>

  </div>
</template>
<script>
//引入组件
import TabLeBiaoGe from '../components/tabLeBiaoGe.vue'
</script>

3.注册组件

<template>
  <div>

  </div>
</template>
<script>
//引入组件
import TabLeBiaoGe from '../components/tabLeBiaoGe.vue'
export default {
//注册组件
  components:{
    TabLeBiaoGe
  }
}
</script>

4.使用组件

<template>
  <div>
   //使用组件
    <tab-le-biao-ge/>
  </div>
</template>
<script>
//引入组件
import TabLeBiaoGe from '../components/tabLeBiaoGe.vue'
export default {
//注册组件
  components:{
    TabLeBiaoGe
  }
}
</script>

5.组件传参

1，父传子

父组件传参

在已定义好的组件标签里写要传递的参数

语法

<template>
  <div>
   //使用组件传参
    <TabLeBiaoGe name="张三"></TabLeBiaoGe>
  </div>
</template>
<script>
//引入组件
import TabLeBiaoGe from '../components/tabLeBiaoGe.vue'
export default {
//注册组件
  components:{
    TabLeBiaoGe
  }
}
</script>

 子组件接收

通过props接收数据

语法

<script>
export default {
//接收的参数可以直接使用,多个参数继续写里面就好了
    props:['name']//多个写法 props:['name','age'...]
    
}
</script>

props特性

props可以判断数据类型和必传非必传，还有默认值

语法

<script>
export default {
props:{
    name:{
    //数据类型
        type:String,
      //是否非必穿值：true false
        required:true,
       //不传值的话，默认值
        default:'李四'
        //如果默认值是引用书记类型的话必须要从函数获取
        default:function(){
            return {name:'张三',age:'18'}
            }
        }
    }
}
</script>

子传父

1.通过在子组件中通过this.$emit方法触发父组件中的自定义事件并传参。

2.父组件在组件标签里定义自定义事件接收参数。

//子组件
<buton @click="fn">
    给父亲
</button>
//js
 methods:{
       fn(){
        //发送事件 相当于打电话,passsc是自定义事件，后面是传的参数
         this.$emit('passsc','儿子的悄悄话');
           }
       }
//父组件
<my-div @passsc="fn()"></my-div>
//js
 methods:{
//e就是传来的参数
       fn(e){
        console.log(e)
       }