vue--第三天组件

朴灿烈づ我的快乐病毒、 2021-09-19 10:38 394阅读 0赞

\#\# 定义Vue组件  
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；  
组件化和模块化的不同：  
 + 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；  
 + 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；  
\#\#\# 全局组件定义的三种方式

1：使用Vue.entend配合Vue.component 方法

2：直接使用Vue.component

3:在template里面根据id，在外部单独写一个魔板

1：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

![20190514102004926.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

无论哪种方式创建的组件，组件template属性指向的模板内容，只能有一个根元素

私有组件

在Vue实例所控制的内部定义

compontents:\{

template:""  //可写id也可直接写模板内容

![20190514102418386.png][]

组件data和methods

组件也可以有自己的data，这样就不用在外面单独在写模板了，但是组件data必须是一个方法，实例绑定的data是一个对象，而且组件的返回值是对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

为什么组件data必须是一个方法，而且返回值也必须是对象

// 为了互不影响
    // 如果是对象，会修改，所有的都是一样的，函数每次都是重新赋值,对象指向的是同一块空间

组件切换

1：通过v-if v-else ,flag,

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div class="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <resiger v-else="flag"></resiger>
    </div>
    </body>
    <script>
        Vue.component('login', {
            template: "<h3>登录</h3>"
        })
        Vue.component('resiger', {
            template: "<h3>注册</h3>"
        })
        var vm = new Vue({
            el: ".app",
            data: {
                flag: true
            },
            methods: {}
    
        })
    </script>
    </html>

组件切换2

1:Vue提供了compontent。来指定组件的名称

compontent只是占位符，通过事件绑定: is 来展示要指定的组件名称

注意，需要在data里面定义你的要绑定的组件名称(变量)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div class="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='resiger'">注册</a>
        
        
        
        <component :is="comName"></component>
        
        
    
    </div>
    </body>
    <script>
        // 组件名称：字符串
        Vue.component('login', {
            template: "<h3>登录组件</h3>",
        })
        Vue.component('resiger', {
            template: "<h3>注册主键</h3>",
        })
        var vm = new Vue({
            el: ".app",
            data: {
                comName: 'login' //当前component组件中的 :is  绑定的名称
            },
            methods: {}
    
        })
    </script>
    </html>

组件切换+动画

1：动画需要注意，在切换的同时两个都会出来，但是我们需要登录就是登录，需要加属性 mode = "out-in" 先出后进

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../lib/vue-2.4.0.js"></script>
        <style>
            .v-enter,
            .v-leave-to {
                opacity: 0;
                transform: translateX(150px);
            }
    
            .v-leave-active,
            .v-enter-active {
                transition: all 0.3s ease;
            }
        </style>
    </head>
    <body>
    <div class="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='resiger'">注册</a>
        
        
        
        
        <transition mode="out-in">
            <component :is="comName"></component>
    
        </transition>
        
        
    
    </div>
    </body>
    <script>
        // 组件名称：字符串
        Vue.component('login', {
            template: "<h3>登录组件</h3>",
    
        })
        Vue.component('resiger', {
            template: "<h3>注册主键</h3>",
    
        })
        var vm = new Vue({
            el: ".app",
            data: {
                comName: 'login' //当前component组件中的 :is  绑定的名称
            },
            methods: {}
    
        })
    </script>
    </html>

\#\# 父组件向子组件传值  
1. 组件实例定义方式，注意：一定要使用\`props\`属性来定义父组件传递过来的数据  
\`\`\`

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div class="app">
        
        <colm :parentmsg="msg"></colm>
    </div>
    </body>
    <script>
    
        var vm = new Vue({
            el: ".app",
            data: {
                msg: "大家好,我是父组件的数据"
            },
            methods: {},
            // 默认子组件无法访问父组件的data和meyhods
            components: {
                colm: {
                    data() { //自己私有的
                        return {
                            title: "asd",
                            content: 123
                        }
                    },
                    template: "<h1>这是子组件---------{
       {parentmsg}}</h1>",
                    //把父组件传递过来的parentmsg现在props中定义，才能使用
                    // 注意组件props所有数据，都是通过父组件传来的
                    props: ['parentmsg']
                }
            }
        })
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/ca484e0d17fe4d6cac514350ca7a7c22.png
[20190514102004926.png]: /images/20210812/e217e407710f4b7d8331adf2e06ed4bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/297ee29f40b444b499ccf99b9aef6751.png
[20190514102418386.png]: /images/20210812/5eea822264cd45f9870cc1f2bf61b095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/476ab7c656fa4539ac371d62899c516f.png