Vue中组件

0828自我总结

Vue中组件

一.组件的构成

组件:由 template + css + js 三部分组成(.vue文件)

  • 1)组件具有复用性
  • 2) 复用组件时,数据要隔离
  • 3) 复用组件时,方法不需要隔离,因为方法使用隔离数据就可以产生区别

组件介绍:

  • 1) 每一个组件都有自己的template(虚拟DOM),最后要替换掉真实DOM(渲染)
  • 2) 挂载点el,在根组件没有规定template,用挂载的真实DOM拷贝出虚拟DOM,完成实例创建后再替换掉真实DOM(渲染)
  • 3) 挂载点el,在根组件规定template,就采用自己的template作为虚拟DOM,挂载点还是必须的,用于占位
  • 4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时,整个项目只有一个根组件
  • 5) template只能解析一个根标签

二.template的使用

用法一-把整个vue所关联的内容替换

<div id="app">
    {{ msg }}
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
        template: `
        <div id="main">
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
        </div>
        `,
    })
</script>

最后显示的效果为

message
message

其实他是先出现message

然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容

用法二-局部组件

    <div id="app">
        <!--3)组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="js/vue.js"></script>
<script>
    // 1)创建组件
    let localTag = {
        template: '<p>66666</p>'
    };
    new Vue({
        el: '#app',
        // 2)注册组件
        components: {
            // localTag: localTag,  函数名和组件名相同可以直接简写成一个名字
            localTag
        }
    })
</script>

局部组件可以分三步

  • 创建组件
  • 注册组件
  • 网页中渲染

用法三-全局组件

<div id="main">
    <global-tag></global-tag>
</div>
<script src="vue.js"></script>
<script>
    // 全局组件
    // 1)创建组件
    // 2)渲染组件
    // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
    Vue.component('global-tag', {
        template: '<p>66666</p>'
    });
    new Vue({
        el: '#main',
    });
</script>

使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签

注意点

  • template中只能有一个根标签,如果有多个,只生效第一个
  • template内容如果要多行显示方便观察的话用反引号`来代替双引号或者单引号

三.组件复用的数据隔离

1.局部组件中

    <div id="app">
        <!--3)组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="vue.js"></script>
<script>
    // 1)创建组件
    let localTag = {
        data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    };
    new Vue({
        el: '#app',
        // 2)注册组件
        data:{
            msg:20
        },
        components: {
            // localTag: localTag,  函数名和组件名相同可以直接简写成一个名字
            localTag
        }
    })
</script>
  • 把data里面值放function中当然了function可以不用写省略掉
  • 而且不会受vue中msg影响,只受组件中的msg影响

2,全局组件中

<div id="main">
    <global-tag></global-tag>
</div>
//<global-tag></global-tag> 这样就是个普通的自定义标签
<script src="vue.js"></script>
<script>
    // 全局组件
    // 1)创建组件
    // 2)渲染组件
    // 3) 使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签
    // 4) 这里的全局不是指整个网页而是指与vue进行挂载那些全部的部分
    Vue.component('global-tag', {
                data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    });
    new Vue({
        el: '#main',
        data:{
            msg:10
        }
    });
</script>

特点和局部相同

四.组件信息交互父传子

<div id="app">
    <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad_dic'],
        template: `
        <div class="ad">
            <img :src="ad_dic.img" alt="">
            <h4>{{ ad_dic.title }}</h4>
        </div>
        `,
    };

    // 模拟后台的数据
    let ads = [
        {
            'img': 'img/001.png',
            'title': '小猫'
        },
        {
            'img': 'img/002.png',
            'title': '黄蛋'
        },
        {
            'img': 'img/003.png',
            'title': '蓝蛋'
        },
        {
            'img': 'img/004.png',
            'title': '短腿'
        },
    ];
    new Vue({
        el: '#app',
        data: {
            ads,  // 后期项目是后台返回的数据
        },
        components: {
            localTag
        }
    })
    // 分析数据 父传子
    // 1)父组件提供数据
    // 2)在父组件模板中,为子组件标签设置自定义属性绑定父级数据
    // 3)在子组件props成员中,接收自定义属性
    // 4)在子组件模板和方法中,使用自定义属性名就可以访问父级数据
</script>

简单总结

父级模板:<local-tag :属性名="父级的数据" v-for="ad in ads" :key="ad.img"></local-tag>

子级模板: props: ['属性名'],

五.组件信息交互子传父

<div id="app">
    <p>
        <input type="text" v-model="info">
        <button @click="add_msg">留言</button>
    <ul>
        <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
    </ul>
    </p>
</div>

<script src="js/vue.js"></script>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                this.$emit('del_action', this.index)
            }
        }
    };
    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析数据 子传父
    // 1)子组件提供数据
    // 2)子组件通过系统事件激活自己的绑定方法,发送一个自定义事件,携带自身数据
    // 3)在父组件模板中的子组件标签中为自定义事件绑定父组件方法
    // 4)父组件实现方法获取到子组件数据
</script>

简单总结

子级模板: <span @系统自带的属性="子级方法" class="del">x</span>

子级实例方法中:this.$emit('自定义事件',子级数据们)

父级模板:<msg-tag @自定义事件="父级的方法" v-for="(msg, i) in msgs" :key="msg"></msg-tag>

父级方法: 父级的方法(子级的数据们){处理与子级相关的函数}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue的使用

    h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析

    小小咸鱼YwY
  • Go-数据类型以及变量,常量

    指针类型(Pointer) 数组类型 结构化类型(struct) Channel 类型 函数类型 切片类型 接口类型(interface) Map...

    小小咸鱼YwY
  • js鼠标滚轮事件上滚下滚判断

    小小咸鱼YwY
  • SAP S/4 HANA这货是ERP皇帝的新装?

     HANA这货   当您看到本文的时候,应该是知道,或者听说过SAP HANA的,“内存计算、实时计算、独领风骚、业界最领先的内存计算技术,革命性的内存数据库产...

    人称T客
  • pyspider 爬虫教程(三):使用 PhantomJS 渲染带 JS 的页面

    在上两篇教程【pyspider 爬虫教程 (1):HTML 和 CSS 选择、pyspider 爬虫教程(2):AJAX 和 HTTP】中,我们学习了怎么从 H...

    小莹莹
  • SAP HANA神话(3):心黑胆肥的SAP

    花开两枝,讲完黯然神伤的Michael和他可怜的卖不掉的H-store,我们来看看SAP的葫芦里卖的什么药。以事后诸葛亮的态度来说,SAP演出了一场大戏,从研发...

    用户1564362
  • Radosgw 架构

    Ceph对象网关是一个构建在librados之上的对象存储接口,它为应用程序访问Ceph 存储集群提供了一个RESTful风格的网关。

    用户4361118
  • 业界 | 谷歌AI上线“与书籍对话”项目,从10w+本书中搜索你要的答案

    大数据文摘
  • DNA甲基化实战分析-----bismark 代码篇

      在上次的文章中简单的介绍了bismark的基本知识DNA甲基化分析----------甲基化比对软件专题(Bismark),bismark的功能非常强大,分...

    liu_ll
  • PyTorch 系列 | 数据加载和预处理教程

    原题 | DATA LOADING AND PROCESSING TUTORIAL

    材ccc

扫码关注云+社区

领取腾讯云代金券