Vue之组件

组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用可以相对于理解成封装承一个小模块，能够重复方便使用.

组件分为根组件，全局组件，局部组件

　　根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件

　　全局组件：不用注册，就可以称为任何一个组件的子组件

　　局部组件：必须注册，才可以称为注册该局部组件的子组件

局部组件

创建一个局部组件

1.创建局部组件

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>
<body>
    <div id="app">
        <!--<mcc></mcc>-->
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建一个局部组件

    // 1) 创建局部组件
    // 2) 在父组件中注册该局部组件
    // 3) 在父组件的template模板中渲染该局部组件
    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>
</html>

创建局部组件

全局组件

1.创建全局组件

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>
<body>
    <div id="app">
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1) 创建全局组件
    // 2) 在父组件的template模板中直接渲染该全局组件
    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();

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

创建全局组件

组件交互-父传子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <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>
</head>
<body>
    <div id="app">
        <info v-for="info in infos" :key="info.image" :myinfo="info"></info>
    </div>
</body>
<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>
        `,
        props: ['myinfo']
    };

    // 数据交互 - 父传子 - 通过绑定属性的方式
    // 1) 父组件提供数据
    // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供
    // 3) 在子组件实例中，通过props实例成员获得自定义属性
    new Vue({
        el: '#app',
        components: {
            info,
        },
        data: {
            infos,
        }
    })
</script>
</html>

父传子案例

解析：1.后台传到前台数据 infos 在根组件data中声明并赋值

　　　2.<div id="app">

　　　　子标签中通过 v-for 循环遍历父组件传来的infos数据，并将遍历出来的info通过 :myinfo传入子组件中

　　　3.子组件中通过props:['myinfo'] 成员将遍历出来的Info数据拿到并渲染到template中,之后再依次渲染并传到根标签<info>中

组件交互-子传父

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .close:hover {
            cursor: pointer;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="userMsg">
            <button @click="sendMsg">留言</button>
        </p>
        <ul>
            <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
        </ul>
    </div>
</body>
<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) {
                // $emit('自定义事件名', 参数们)
                this.$emit('remove_msg', i);
                this.$emit('myclick', 1, 2, 3, 4, 5)
            }
        }
    };
    // 组件交互-子传父
    // 1) 数据由子组件提供
    // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
    // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script>
</html>

子传父实例

解析：1.数据由子组件提供

　　　2.子组件内部通过触发系统事件 this.$emit('自定义事件名',参数) 发送一个自定义事件，将数据携带出来

　　 3.子组件再通过子组件标签中用@自定义事件名=“再次定义事件名” 传入父组件中，父组件通过此再次定义的事件名与其携带的参数，用methods成员拿到

　　　　参数并对其进行处理

万般皆下品，唯有读书高！