vue3.0入门（四）：组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

组件

• 组件基础

<my-counter></my-counter>const app = Vue.createApp({ // 根组件
data() {
return {}
}
})//注册子组件my-counter
app.component('my-counter', {
data() {
return {}
},
template: ``,
methods: {
}
}).mount('dom节点')

• 通过props向子组件传值

<blog-post title='标题一'></blog-post>app.component("blog-post",{
props: ['title'],
template: `<h3>{{title}}</h3>`
})<!-- 动态绑定：通过props向子组件传值；将数组中的数据循环到组件-->
<blog-post
v-for="post in posts"
:key="post.id"
:title="post.title"
></blog-post>

• 监听子组件事件：单项数据流，父组件可向子组件传递的数据，反之则不行，父组件的数据改变时，子组件也会随之改变

app.component('blog-post1', { // 1.注册一个组件
props: ['title'],
template: `
<h3>{{title}}</h3>
<button @click='$emit("btn", title)'>按钮</button> // 2.emit方法传入事件名称btn，同时可传入参数
` ,
emits: ['btn'] // 3.数组中包含所有emit
})<blog-post1 @btn='btn($event)'></blog-post> // 4.v-on:btn=btn() 第一个btn表示脚本部分自定义的事件名称，第二个btn()表示根组件的methods
<blog-post1 @btn='btn'></blog-post> //等同于上面的写法const app = Vue.createApp({
data() {
return {}
},
methods: {
btn(e) { // 5.
// ...
}
}
})

插槽

const app = Vue.createApp({})app.component('alert-box', {
template: `
<div>Error：<slot></slot></div>
`
}).mount('#app')<!-- 使用该组件时，组件中间使用的标签文本会替换slot-->
<alert-box><span>服务器异常</span></alert-box>

script模板

<!-- 相当于注册组件编写模板时，提取到一个script标签中-->
<script type='text/x-template' id='demo'>
<!-- 写入标签文本-->
</script>const app = Vue.createApp({})
app.component('alert-box', {
template: `#demo`
}).mount('#app')<alert-box></alert-box>