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>

vue3.0入门(四):组件

上一篇:nginx安装


下一篇:接口和抽象类存在的意义和应用场景的区别