vue
【摘要】
vue组件
组件（compoent）是vue最强大的功能之一。
称之为元素，组件可以扩展HTML中的元素，封装可重用的代码。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(i...
vue组件
组件（compoent）是vue最强大的功能之一。
称之为元素，组件可以扩展HTML中的元素，封装可重用的代码。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEKCGko6-1604129087137)(C:\Users\DELL\AppData\Local\Temp\1564645532592.png)]
如何注册一个全局组件：
语法：Vue.compoent(tagName,Options)
tagName就是组件名，Options是配置的选项，用一下方式调用组件
语法：
全局组件
所有实力都可以用到全局组件
<body>
<div id="app">
<aaa></aaa>
</div>
<script>
//注册
Vue.component('aaa',{
template:'<h1>这就是我自定义的全局组件</h1>'
})
//创建实例
new Vue({
el:"#app"
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
局部组件
<body>
<div id="app">
<aaa></aaa>
</div>
<script>
var child ={
template:'<h1>我是局部组件</h1>'
}
//创建实例
new Vue({
el:"#app",
components:{
aaa:child
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
prop
prop 是父组件用来传递数据的一个自定义的属性
父组件通过prop把数据传递给子组件，子组件就需要显示的方式声明“prop”
<body>
<div id="app">
<child msg = "hello"></child>
</div>
<script>
Vue.component('child',{
//声明props
props:['msg'],
//可以在vm实例中进行像“this.message”这样的使用
template:'<span>{{msg}}</span>'
})
new Vue({
el:'#app'
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
动态prop
类似于用v-bind绑定HTML特性的一个表达式，我们也可以用v-bind动态绑定prop的值到我们的父组件的数据中。
<body>
<div id="app">
<div>
<input v-model="parentMsg" /><br />
<child v-bind:message="parentMsg"></child>
</div>
<script>
Vue.component('child',{
props:['message'],
template:'<span>{{message}}</span>'
})
//创建实例
new Vue({
el:'#app',
data:{
parentMsg:'父组件内容'
}
})
</script>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
自定义事件
父组件是使用props传递数据给子组件，子组件想要把数据传递回去，就需要我们自定义事件
使用v-on指令绑定自定事件
$on(eventName)监听事件
$emit(eventName)触发事件
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
回顾：
1、注册一个全局的组件
2、注册局部组件
3、props父组件对子组件传值
4、自定义事件，子组件像父组件传值
作业：
1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件
}
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
## 回顾：
1、注册一个全局的组件
2、注册局部组件
3、props父组件对子组件传值
4、自定义事件，子组件像父组件传值
## 作业：
1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件
2、熟练使用组件进行传值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/109403162
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）