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>