15 组件的切换和对组件的data的使用

最新推荐文章于 2020-09-11 15:37:08 发布

学习总不晚

最新推荐文章于 2020-09-11 15:37:08 发布

阅读量128

点赞数

分类专栏： Vue 文章标签：组件：component

本文链接：https://blog.csdn.net/u013472738/article/details/100185647

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

a 标签的使用
事件修饰符
组件的定义
组件的切换：登录 / 注册

泡椒鱼头：微辣

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
    <style>

    </style>
</head>

<body>

    <div id="app">
        <mycom1></mycom1>
        <mycom2></mycom2>


        <!-- 下面是通过 if / else 实现组件切换的；但是这个是有限制的：如多个组件的切换 使用if /else 就不好用了 -->
        <a href="" @click.prevent="flag=true">登陆</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <my-com5 v-if="flag"></my-com5>
        <mycom6 v-else="flag"></mycom6>

        <!--  下面通过使用一种 包裹定义组件的方式 来切换 组件的使用 -->
        <!-- Vue 提供了 component ，来展示对应名称的组件

component 是一个占位符， :is 属性；可以用来指定组件的名称

注意⚠️：在:is 中：如果直接填写使用组件的名称应该用单引号包含起来： " 'zhujian_name'  "
-->
        <component :is=" 'mycom6' "></component>
<hr>
<!--  注意：  组件名称用 单引号 ' Name '  包括起来的  -->
<a href="" @click.prevent="nameZjian = 'myCom5' ">登陆</a>
<a href="" @click.prevent="nameZjian = 'mycom6' ">注册</a>
<component :is=" nameZjian "></component>


    </div>


    <!--  组件定义 -->
    <template id="mycomm3">
        <div>
            <hr>
            <h3>==={{  msg }}</h3>
        </div>
    </template>

    <script>

        //组件中 data 的使用 ---------
        // 定义一个全局使用的组件：学习使用组件中的 data 注意和Vue中的区别：组件中的data是个 方法并且有返回值return
        Vue.component("mycom1", {
            template: '<h3>组件中data的使用：注意和 Vue中data的异同 --- {{msg }}</h3>',
            data: function () {
                return { msg: " 我是组件中 data的数据的引用" }
            }
        })
        Vue.component("mycom2", {
            template: '#mycomm3',
            data: function () {
                return { msg: " 我是组件中 data的数据的引用" }
            }
        })

        //组件的切换
        //组件的切换 组件1: 登陆
        Vue.component("myCom5", {
            template: '<h3>登陆页面</h3>'
        })
        //组件的切换 组件2:注册
        Vue.component("mycom6", {
            template: '<h3>注册页面</h3>'
        })


        Vue.component("mycom8", {
            template: '#mytem8',
            data: function () {
                return { msgdata: "组件切换" }
            }

        })
 
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                nameZjian:'mycom6' // 当前组件component 中的 :is 绑定的组件的名称；默认是mycom6
 
            },
            methods: {

            }
        })
 
    </script>
</body>

</html>