佳丽总结:超级详细Vue组件

普通组件(四种方式)

一、Vue.extend配合Vue.component
    <div id="app">
        <!-- 3、使用组件 -->
        <abc>{{message}}</abc>
    </div>
        //1、定义组件模板
        var xxx = Vue.extend({
            template: `<h1>这是两个<br>小鹿
            <img src="../../测试图片/1.jpg">
             </h1>`
        })
        //2、注册组件
        Vue.component("abc", xxx)
        const app = new Vue({
            el: '#app',
            data: {
                message: 'helloworld'
            },
            methods: {
            }
        })
二、直接使用Vue.component:
<div id="app">
    <!-- 2、调用组件 -->
    <abc></abc>
</div>
//直接定义组件
Vue.component('abc',{
        template:`<div>
        <h1>hhhhhhhh</h1>
        <p>啊哈哈哈</p>
        </div>`
    })
const app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    }
})
三、定义script标签中
<div id="app">
        <!-- 调用组件 -->
        <account></account>
 </div>
//将字符串定义到script标签中
<script id="tmp1" type="x-template">
        <div>
            <a href="#">登录</a>|<a href="#">注册</a>
        </div> 
    </script>
//定义组件
<script>
        Vue.component('account', {
            template: '#tmp1'
        })
        const app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        }) 
    </script>
四、(推荐写法)
    <div id="app">
        <!-- 3、调用组件 -->
        <abc></abc>
    </div>
    <!-- 1、定义模板 设置id值 -->
    <template id="tmp1">
        <div>
            <h1>hahahha</h1>
        </div>
    </template>
    <script>
        // 2、定义模板,一个是模板名称,一个是模板与id值连接
        Vue.component('abc', {
            template:'#tmp1'
    });
        const app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>

组件的父子关系

在常规状态下不能夸区域访问。

image-20201207213846919

组件的动态切换

实质是系统(Vue)自己定义了一个标签,标签的名字叫component ,compont这个标签定义了一个属性,这个属性叫is

<component v-bind:is="变量" ></component>

image-20201207220143620

组件传值(父传子、子传父)

父传子:

即父组件的值传递给子组件,

一、分别定义两个组件,父组件和子组件

二、在子组件中定义:props:[属性]

三、这个属性,在子标签中使用,即:v-bind:属性=父组件中data返回的数据。

四、在子组件中去使用它,即:{{属性}}

父传子图示:

image-20201207210401469

子传父:

即子组件的值传递给父组件

子传父图示:

image-20201207213226110

组件插槽

在子标签中去插入变量后,在子组件中用 渲染出来,如下图:

image-20201207213524843

事件总线

图示:

image-20201207214724190

在脚手架中使用组件

图示:

image-20201207221751658

附录

普通路由完整代码

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE Project</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <a href="#/aa">AAA</a>|<a href="#/bb">BBB</a>
        <router-view></router-view>
    </div>
    <template id="aaa">
        <div>
            <p>This is a </p>
        </div>
    </template>
    <template id="bbb">
        <div>
            <p>This is b </p>
        </div>
    </template>
    <script>
        var a1 = Vue.component('aaa', {
            template: '#aaa'
        });
        var b1 = Vue.component('bbb', {
            template: '#bbb'
        });
        var r = new VueRouter({
            routes: [
                { path: '/aa', name: 'x', component: a1 },
                { path: '/bb', name: 'y', component: b1 }
            ]
        })
        const app = new Vue({
            el: '#app',
            router: r,
            data: {
            },
            methods: {
            }
        });
    </script>
</body>

</html>

路由传参完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE Project</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/login?name=yujie&pwd=123">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <template id="aa">
        <div>
            <h3>登录组件---{{$route.query.name}}---{{$route.query.pwd}}</h3>
        </div>
    </template>
    <template id="bb">
        <div>
            <h3>注册组件</h3>
        </div>
    </template>
    <script>
        var login = Vue.component('aa', {
            template: '#aa'
        });
        var register = Vue.component(
            'bb', {
            template: '#bb'
        });
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register },
            ],
        });
        new Vue({
            el: '#app',
            router: router
        })
    </script>
</body>

</html>

路由样式的完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE Project</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        /* 设置高亮方式一 */
        /* .router-link-active {
            color: lightblue;
        } */
        /* 设置高亮方式二 */
        .active {
            color: orange;
        }

        /* 设置动画 */
        .v-enter,
        .v-enter-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>

    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 设置动画 -->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        var login = Vue.extend({
            template: '<h3>登录组件</h3>'
        });
        var register = Vue.extend({
            template: '<h3>注册组件</h3>'
        });
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register },
            ],
            // 设置高亮方式二   还是要在style中去设置active的样式
            linkActiveClass: 'active'
        });
        new Vue({
            el: '#app',
            router: router
        })
    </script>
</body>

</html>

事件总线的完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE Project</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>总线案例</p>
        <father></father>
        <son></son>
    </div>
    <template id='father'>
        <div class="father">
            <p>this is father 【{{msg}}】</p><input type="text" v-model="msg">
            <button v-on:click="show">发送</button>
        </div>
    </template>
    <template id='son'>
        <div class="son">
            <p>this is 【{{msg}}】</p>
        </div>

    </template>
    <script>
        var bus = new Vue({});
        Vue.component('father', {
            template: '#father',
            data() {
                return { msg: 'father hell,world' }
            },
            methods: {
                // 一个发送
                show() {
                    bus.$emit('func', this.msg);
                }
            }
        });
        Vue.component('son', {
            template: '#son',
            data() {
                return { msg: 'son hell,world' }
            },
            mounted() {
                //一个接收
                console.log('接收。。。。');
                bus.$on('func', (data) => {
                    console.log(data)
                    this.msg = '接收:' + data
                });
            }
        });
        const app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
    <style>
        #app {
            border: 4px solid black;
            width: 400px;
        }

        .father {
            border: 2px solid red;
            width: 80%;
        }

        .son {
            border: 2px solid blue;
            width: 80%;
        }
    </style>
</body>

</html>

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1