Vue 组件

发布时间：2020-12-16 23:18:15 所属栏目：百科来源：网络整理

导读：Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。组件的注册 Vue.component('my-component' ' A component! ' app = '#app' } }); Child = ' A component! ' "gao" span style="colo

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。

组件的注册

Vue.component('my-component''

A component!

' app = '#app'}
});

Child ='

A component!

'"gao"<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
<span style="color: #008000;">//<span style="color: #008000;"> ...
<span style="color: #000000;"> components: {
<span style="color: #008000;">//<span style="color: #008000;"> 将只在父组件模板中可用
'my-component'<span style="color: #000000;">: Child
}
})

Vue.component('child'

"点我"123"#app"

组件之间的通信

我们的组件在任何地方用的时候都要是一个样子么~

可不可以我们给组件传个参数~让组件在不同的地方表现不同的状态~

我们之前说过博客评论@某某某，点击用户名可以跳转到该用户站点。

Vue.component('child'`,props: ["username"<span style="color: #0000ff;">var app = <span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el: "#app"<span style="color: #000000;">,data:{
name: "@gaoxin"<span style="color: #000000;">
}

});

app.$on(event,callback) 监听当前实例上的自定义事件，事件由$emit触发，回调函数接收事件触发器额外参数。

app.$emit(event,[args....])? 触发当前实例上的事件，额外参数传给监听器的callback回调函数。

Vue.component('parent'

="active">您的余额998

.active=});
Vue.component('child'<span style="color: #000000;">,data: <span style="color: #0000ff;">function<span style="color: #000000;"> () {
<span style="color: #0000ff;">return<span style="color: #000000;"> {
msg: "显示余额"<span style="color: #000000;">,methods: {
on_click(){
<span style="color: #008000;">//<span style="color: #008000;"> alert(123)
<span style="color: #0000ff;">this.$emit('show_balance',{q:1,b:2<span style="color: #000000;">})
}
}
});

平行组件之间的通信，喊话需要一个中间调度器，在组件加载完成之后去监听调度器事件，回调函数接收数据。

Event = Vue.component('whh'<span style="color: #000000;">,{
template: `

''"whh_said_something",'shh'

'' me = 'whh_said_something',=

混合Mixins

重复功能和数据的储存器，可以覆盖Mixins的内容。

base =.visible = .visible = Vue.component('popup'<span style="color: #000000;">,{
template:`

<button @click="show">PopUp show
<button @click="hide">PopUp hide
<div v-<span style="color: #0000ff;">if="visible">

hello everybody

});
Vue.component('tooltip'<span style="color: #000000;">,{
template: `

<div @mouseenter="show" @mouseleave="hide">ToolTip

<div v-<span style="color: #0000ff;">if="visible">

ToolTip

<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el: "#app"<span style="color: #000000;">,})

插槽 Slot

插槽是一套内容分发的API，在组件中，作为内容承载分发的出口

</panel>
<panel></panel>
<panel></panel>

Vue.component('panel''#panel-tpl'<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el: "#app"<span style="color: #000000;">,})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!