系列文章目录
Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念
文章目录
系列文章目录一、Vue组件的组成--属性二、Vue组件的组成--事件三、Vue组件的组成--插槽总结
一、Vue组件的组成–属性
属性可分为：
自定义属性 props
export default {
props: {
todo: Object,
list: {
type: Array,
default: ()=>[]
},
isVisible: {
type: Boolean,
default: false,
},
},
};
原生属性 attrs
没有声明的属性，默认自动挂载到组件根元素上
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue!" />
<ol>
<TodoItem
<!-- 原生属性 -->
title="列表项目"
v-for="item in list"
v-bind:todo="item"
v-bind:key="item.id"
>
</TodoItem>
</ol>
</div>
</template>
设置inheritAttrs为false可以关闭自动挂载
export default {
inheritAttrs: false,
props: {
todo: Object,
list: {
type: Array,
default: ()=>[]
},
checked: {
type: Boolean,
default: false,
},
},
};
特殊属性 class、style
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue!" style="color:red" />
<ol>
<TodoItem
title="列表项目"
v-for="item in list"
v-bind:todo="item"
v-bind:key="item.id"
></TodoItem>
</ol>
</div>
</template>
二、Vue组件的组成–事件
Vue组件的事件分类两类：
普通事件： @click,@input,@change,@xxx等事件，通过this.$emit(‘xxx’,…)触发
在这里插入代码片
<template>
<div>
<input type="checkbox" :value="checked" @change="onChange" />
<a :class="{active:index === 1}">{{ todo.text }}
</a>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
todo: Object,
list: {
type: Array,
default: () => [],
},
checked: {
type: Boolean,
default: false,
},
index: {
type : Number,
default: -1
}
},
methods: {
onChange(e) {
console.log(e.target.checked)
if (e.target.checked==true){
this.index=1
}else{
this.index =-1
}
},
},
};
</script>
<style scoped>
.active {
color: red;
}
</style>
修饰符事件：@input.trim,@click.stop,@submit.prevent等，一般用于原生HTML元素，自定义组件需要自行开发支持
三、Vue组件的组成–插槽
<template>
<div class="hello">
<h1>{{ msg }}
</h1>
<slot name="button"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue!" style="color:red">
<h2>老语法
</h2>
<input slot="button" type="submit" value="点击进行提交" />
</HelloWorld>
<HelloWorld msg="Hello Vue!" style="color:red">
<h2>新语法
</h2>
<template v-slot:button>
<input type="submit" value="点击进行提交" />
</template>
</HelloWorld>
<ol>
<TodoItem
title="列表项目"
v-for="item in list"
v-bind:todo="item"
v-bind:key="item.id"
></TodoItem>
</ol>
</div>
</template>
总结
Vue组件主要有属性、事件、插槽三大核心概念：
