组件
<my-counter></my-counter>
const app = Vue.createApp({ // 根组件
data() {
return {}
}
})
//注册子组件my-counter
app.component(‘my-counter‘, {
data() {
return {}
},
template: ``,
methods: {
}
}).mount(‘dom节点‘)
<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>
vue3.0入门(四):组件