文章目录
前言
今天在复习完前面学习的基础后开始学习Vue的组件化开发，学习笔记整理如下，有错误或者不足欢迎大家指正。
一、组件是什么？
组件是可复用的 Vue 实例，且带有一个名字。下面展示的就是一个简单的Vue组件
Vue.component('todo-item', {
template: '<h2>你好</h2>'
})
<body>
<div id="app">
<!-- 使用简单的组件 -->
<todo-item></todo-item>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
//这是一个简单的组件
template: '<h2>你好</h2>'
})
var app = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
二、关于Vue组件
1.如何定义组件名
- 使用 kebab-case
ue.component('my-component-name', {
/* ... */ //组件的内容
})
- 使用 PascalCase
Vue.component('MyComponentName', {
/* ... */ //组件的内容
})
PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。
2.组件分类
(1). 全局组件
在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
这三个组件在各自内部也都可以相互使用。
<body>
<!-- 三个全局组件在同一个根实例下使用 -->
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('component-a', {
template:'<h1>你</h1>'
})
Vue.component('component-b', {
template:'<h2>们</h2>'
})
Vue.component('component-c', {
template:'<h3>好</h3>'
})
var app = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
(2). 局部组件
通过一个普通的 JavaScript 对象来定义组件：
<body>
<div id="app">
<component-a></component-a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//这里定义了一个简单的局部组件
var ComponentA = {
template: '<h3>你们好！</h3>'
}
var app = new Vue({
el: "#app",
components: {
'component-a': ComponentA,
}
})
</script>
</body>
3.组件与实例
在Vue中我们有： 组件 = 实例
4.组件传值
(1).父组件向子组件传递参数
父组件向子组件传递参数的时候依靠 属性传递
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<component-a
v-for="(item, index) of list"
:key="index"
:content="item" //父组件的属性值
:index="index"
@delete="handleDelete"
></component-a>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//这里定义了一个简单的局部组件
Vue.component('component-a',{
props: ['content', 'index'], //子组件接受父组件传递参数，[]内为传递过来的参数
template: '<li @click="handleClick">{
{content}}</li>',
methods: {
handleClick: function(){
this.$emit('delete', this.index)
}
}
})
var app = new Vue({
el: "#app",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
(2).子组件向父组件传递参数
子组件向父组件传递参数的时候通过发布订阅事件完成
子组件发布一个事件，父组件订阅该事件
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<component-a
v-for="(item, index) of list"
:key="index"
<!-- 父组件的属性值 -->
:content="item"
:index="index"
@delete="handleDelete"
<!-- 父组件订阅了子组件发布的事件，即可接受子组件的数据 -->
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//这里定义了一个简单的局部组件
Vue.component('component-a',{
props: ['content', 'index'], //子组件接受父组件传递参数，[]内为传递过来的参数
template: '<li @click="handleClick">{
{content}}</li>',
methods: {
handleClick: function(){
this.$emit('delete', this.index) //子组件发布一个事件
}
}
})
var app = new Vue({
el: "#app",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
总结
提示：这里对文章进行总结：
以上就是今天要讲的内容，本文简单总结了Vue的组件化开发。、
author： KK
time ：2021年9月10日15:31:15
flag：2/30