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>