首页 笔记正文

【笔记】vue组件

從出茳湖 笔记 2019-10-09 27 0

vue.jpg

组件

1)组件:一个包含html、css、js独立的集合体,这样的集合体可以完成页面结构的代码复用

2)组件分为根组件、全局组件与局部组件

    根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件

    全局组件:不用注册,就可以成为任何一个组件的字组件

    局部组件:必须注册,才可以成为注册该局部组件的子组件

3)每一个组件都有自身的html结构,css样式,js逻辑

    每一个组件其实都有自己的template,就是用来标识自己html结构的

    template模板中有且只有一个根标签

    根组件一般不提供template,就由挂载点的真实DOM提供html结构

4)除根组件的其他组件,数据要有局部作用域,保证组件复用是,各组件间数据的独立性

5)在多组件共处时,在哪个组件模板中出现的变量,由当前组件提供

局部组件

1)创建局部组件

2)在父组件中注册该局部组件

3)在父组件的template模板中渲染该局部组件

<style>
    .box {
        box-shadow: 0 3px 5px 0 #666;
        width: 240px;
        height: 300px;
        text-align: center;
        padding: 20px 0;
        float: left;
        margin: 5px;
    }
    .box img {
        width: 200px;
    }
</style>
<div id="app">
    <!--<mcc></mcc>-->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div class="box">
            <img src="img/666.jpg" alt="">
            <h3>凤哥</h3>
            <p>马叉虫❤马叉虫</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        components: {
            // mcc: localTag,
            // localTag,
            'local-tag': localTag,
        }
    })
</script>

全局组件

1)创建全局组件

2)在父组件的template模板中直接渲染该全局组件

<style>
    .box {
        box-shadow: 0 3px 5px 0 #666;
        width: 240px;
        height: 300px;
        text-align: center;
        padding: 20px 0;
        float: left;
        margin: 5px;
    }
    .box img {
        width: 200px;
    }
</style>
<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <div class="box" @click="action">
            <img src="img/666.jpg" alt="">
            <h3>凤哥</h3>
            <p>马叉虫❤{{ num }}</p>
        </div>
        `,
        data () {
            return {
                num: 0
            }
        },
        methods: {
            action() {
                this.num++;
            }
        }
    });

    // 数据局部化分析导入
    // a = function () {
    //     return {num: 10}
    // };
    // b1 = a();
    // b2 = a();
    // b3 = a();
    // 这样处理b1,b2,b3的数据就彼此独立的,但是都来源于a

    new Vue({
        el: '#app',
    })
</script>

组件交互-父传子

数据交互-父传子-通过绑定属性的方式

1)父组件提供数据

2)在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供

3)在子组件实例中,通过props实例成员获得自定义属性

<style>
    .info {
        text-align: center;
        width: 200px;
        padding: 3px;
        box-shadow: 0 3px 5px 0 pink;
        float: left;
        margin: 5px;
    }
    .info img {
        width: 200px;
    }
</style>
<div id="app">
    <!-- 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件提供 -->
    <info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
<script src="js/vue.js"></script>
<script>
    // 伪代码:模拟数据从后台请求
    /*
    let infos = '';
    document.onload = function () {
        $.ajax({
            url: '/images/',
            type: 'get',
            success (response) {
                infos = response.data
            }
        })
    };
     */

    let infos = [
        {
            image: 'img/001.png',
            title: '小猫'
        },
        {
            image: 'img/002.png',
            title: '蛋糕'
        },
        {
            image: 'img/003.png',
            title: '蓝糕'
        },
        {
            image: 'img/004.png',
            title: '恶犬'
        },
    ];

    let info = {
        template: `
        <div class="info">
            <img :src="myinfo.image" alt="">
            <p><b>{{ myinfo.title }}</b></p>
        </div>
        `,
        // 3) 在子组件实例中,通过props实例成员获得自定义属性
        props: ['myinfo']
    };

    new Vue({
        el: '#app',
        components: {
            info,
        },
        data: {
            infos,  // 1) 父组件提供数据
        }
    })
</script>

组件交互-子传父

组件交互-子传父

1)数据由子组件提供

2)子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来

3)父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数

<style>
    .close:hover {
        cursor: pointer;
        color: red;
    }
</style>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button @click="sendMsg">留言</button>
    </p>
    <ul>
        <!-- 2) 子组件内部通过触发系统事件,发送一个自定义事件,将数据携带出来 -->
        <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    let msgLi = {
        template: `
        <li>
            <span class="close" @click="deleteMsg(index)">x </span>
            <span>第{{ index + 1 }}条:</span>
            <span>{{ msg }}</span>
        </li>
        `,
        props: ['msg', 'index'],
        methods: {
            // 系统的click事件
            deleteMsg(i) {
                // 1) 数据由子组件提供
                // $emit('自定义事件名', 参数们)
                this.$emit('remove_msg', i);
            }
        }
    };
    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            // 3) 父组件位子组件标签的自定义属性通过方法实现,就可以通过参数拿到子组件传递处理的参数
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script


本文标题:【笔记】vue组件
本文链接:https://zhong-er.com/post/88.html
作者授权:除特别说明外,本文由 從出茳湖 原创编译并授权 中二青年 刊载发布。
版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

评论

本站会员尊享VIP特权,现在就加入我们吧!登录注册
登录
用户名
密码
注册
用户名
密码
确认密码
邮箱
获取邀请码
邀请码
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱