学习记录(day07-Vue组件、自定义属性、自定义事件)

[TOC]

1.1.1什么是组件

• 一个vue文件就是一个组件
• 组件将html标签/css样式/对应JS打包成一个整体，也可以理解钻进一个具有样式和特效的自定义标签。

一、编写组件（提供方）
<template>
  <div>
      <input type="button" @click="show" value="点击">
  </div>
</template>

<script>
export default {
  methods: {
    show(){
      alert('...')
    }
  },
}
</script>
<style>
</style>

二、使用组件（使用方）
<template>
<div>
    <myComp></myComp>
</div>
</template>
<script>
//1、导入组件
import myComp from './组件名'
    export default{
        //2、声明组件
        components:{
            myComp
        }
    }    
</script>
<style>
</style>

1.2.1自定义属性

<template>
  
</template>
<script>
export default {
data() {
    return {    //数据
        
    }
},
methods: {      //方法 
    
},
props:['属性名',...]   //自定义属性
}
</script>

<style>

</style>

1.2.2使用自定义属性

<组件名 属性名='值'></组件名>

一、编写组件，可以接收自定义属性的自值
<template>
<div>
<input type="button" @click="show" :value='tValue'>    
</div>  
</template>

<script>
export default {
methods: {
    show(){
        alert('组件提供')
    }    
},
props:['tValue']
}
</script>

<style>

</style>

二、使用组件，自定义组件按钮的名称
<template>
<div>
 <!--使用组件-->    
</div>  
</template>

<script>
export default {
data() {
    return {
        
    }
},
methods: {
    
},
props:[]
}
</script>

<style>

</style>

1.3.1自定义事件

• 提供方

<template>
<div>
<!--触发js原生的事件-->
    <input type=button @click="函数"/>
</div>
</template>
<script>
    export default{
        //2 声明触发函数
        methods:{
            函数(){
                //3 触发自定义事件 对应 的函数
                this.$emit('自定义事件名');
            }
        }
    }
</script>

• 使用方

<template>
<div>
<!--4 提供方法 $emit将触发此处的函数-->
<名称 @自定义事件名="函数2"></名称>
</div>
</template>
<script>
    export default{
        //5 声明最终执行函数
        methods:{
            函数2(){
            //最后执行的内容
            }
        }
    }
</script>

---

日常学习的总结，主要是为了自己以后看，当然大家有什么好的建议，欢迎评论留言。