您当前的位置: 首页 > 

知其黑、受其白

暂无认证

  • 0浏览

    0关注

    1250博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

5 component 编写一个组件

知其黑、受其白 发布时间:2021-11-25 14:37:34 ,浏览量:0

Vue3组件化开发-每个佳丽都是组件
  • 介绍
  • 如何编写一个组件?
  • 动态组件的编写

介绍

本文算是前几篇的最后一节,这个部分在你学习的时候,一定会有很多不明白的地方,这都不要紧。你只要课后敲出这些代码,能够和截图中一样的效果就算完成任务了。

如何编写一个组件?

Vue中一个最主要的特性,就是让你使用组件化进行开发。 页面上你看到的任何的东西,都可以写成组件。 先来看看如何编写一个静态的Vue组件,编写一个标题组件。

新建一个Demo5.html文件,然后把Demo4.html的内容全部拷贝过来。为了方便书写,把标签的第一行前,声明一个变量,比如就叫做app,声明完变量之后,就可以把mount部分独立出来了。

const app=Vue.createApp({
      //.....somting........
app.mount("#app")

有了app变量,可以非常方便的自定义组件并使用了。 比如现在写一个关于标题的组件。

app.component('my-title', {
    template: '大宝剑城'
})

有了这个组件,就可以在app的模板部分使用了,比如我们放在template的最上面,代码如下:

template: `
`

此时完整代码如下:


    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
增加佳丽
  • [{{index}}]{{item}}
` }) app.component('my-title', { template: '大宝剑城' }) app.mount("#app")

效果如下:

在这里插入图片描述

动态组件的编写

什么是动态组件?

也许我说的并不标准,我这里指的动态组件是显示内容不固定,通过父组件或者程序控制而输出的内容。

现在会了静态组件的基本使用方法,把之前我们写的的佳丽组件单独出来,写一个组件,这个组件会绑定一些props,用于接受父组件传递过来的参数,然后动态显示出内容。

动态组件有一个关键的指令是 v-bind,用这种方法,组件可以通过props取得对应的值。

代码如下:

app.component('my-jiali', {
    props: ['item', 'index'],
    template: `
  • [{{index}}]-{{item}}
  • ` })

    props是一个数组,可以接受多个值。 有了my-jiali组件后,就可以在app的template中使用了,方法如下:

    
    

    看一下效果:

    在这里插入图片描述 这时候肯定会有小伙伴认为,这也没有减少代码的工作量哦, 第一是因为我们的代码还比较简单, 第二是组件的意义是降低程序的耦合性,让大规模开发编程可能。 比如一个页面,分成几个人开发,每个人写不同的模块,写好后拼凑在一起。 有了组件这就变的非常容易。

    本文的内容稍微有点绕,如果你听不太懂也没关系,关键是把代码写出来,为了方便学习,这里给出Demo5.html的全部代码。

    
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
        const app = Vue.createApp({
            data() {
                return {
                    inputValue: '',
                    list: []
                }
            },
            methods: {
                handleAddItem() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
            template: `
    增加佳丽
    ` }) app.component('my-title', { template: '大宝剑城' }) app.component('my-jiali',{ props:['index','item'], template: `
  • [{{index}}]-{{item}}
  • ` }) app.mount("#app")
    关注
    打赏
    1665558895
    查看更多评论
    立即登录/注册

    微信扫码登录

    0.0661s