什么是组件
一个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>自定义属性
<template>
</template>
<script>
export default {
data() {
return { //数据
}
},
methods: { //方法
},
props:['属性名',...] //自定义属性
}
</script>
<style>
</style>使用自定义属性
<组件名 属性名='值'></组件名>
一、编写组件，可以接收自定义属性的自值
<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>自定义事件
提供方
<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>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！