vue--第三天组件

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

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

2：直接使用Vue.component

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

1： vue--第三天组件

vue--第三天组件

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

私有组件

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

compontents:{

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

}

vue--第三天组件

组件data和methods

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

vue--第三天组件

为什么组件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>
    <!--    Vue提供了component，来展示对应组件的名称-->
    <!--    component是占位符  :is 属性，可以用来展示指定的组件名称-->
    <!--属性绑定，会把后面的当做表达式来解析所以是"'login'"-->
    <component :is="comName"></component>
    <!--Vue提供的标签-->
    <!--    compontent,template,transition,transitionGroup-->

</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>
    <!--    Vue提供了component，来展示对应组件的名称-->
    <!--    component是占位符  :is 属性，可以用来展示指定的组件名称-->
    <!--属性绑定，会把后面的当做表达式来解析所以是"'login'"-->
    <!--    通过mode属性，设置组件切换时候的方式-->
    <transition mode="out-in">
        <component :is="comName"></component>

    </transition>
    <!--Vue提供的标签-->
    <!--    compontent,template,transition,transitionGroup-->

</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>

vue--第三天 组件

相关推荐