vue
vue
用户9184480
发布于 2024-12-19 09:22:21
发布于 2024-12-19 09:22:21
代码可运行
运行总次数：0
代码可运行
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>局部组件
<body>
<div id="app">
<aaa></aaa>
</div>
<script>
var child ={
template:'<h1>我是局部组件</h1>'
}
//创建实例
new Vue({
el:"#app",
components:{
aaa:child
}
})
</script>
</body>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>动态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>自定义事件
父组件是使用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、props父组件对子组件传值
4、自定义事件，子组件像父组件传值
作业：
1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件
}
}
})
</script>
</body>## 回顾：
1、注册一个全局的组件
2、注册局部组件
3、props父组件对子组件传值
4、自定义事件，子组件像父组件传值
## 作业：
1、搞清楚什么是组件，并熟练使用祖册全局组件和局部组件
2、熟练使用组件进行传值本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
