vue的组件化概念、方法及使用案例

最新推荐文章于 2024-06-11 18:01:42 发布

Jumbuck_10

最新推荐文章于 2024-06-11 18:01:42 发布

阅读量451

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46221106/article/details/107073880

版权

1. 组件化和模块化

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组建的重用

什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

一、此处创建的组件均为公共组件

1.创建组件的方式一

        // 1.1 使用 Vue.extend 来创建全局的 Vue 组件
        var com1 = Vue.extend({
            template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //通过 template 属性，制定了组件要展示的HTML结构
        })

        // 1.2 使用 Vue.component('组件的名称',创建出来的组件模板对象)
        Vue.component('myCom1',com1)


		// 1.3在指定的div中直接使用 “组件的名称” 调用
		<my-com1></my-com1>

        // 简化写法(不适用中间变量)
			// Vue.component 第一个参数：组件的名称，将来在引用组建的时候，就是一个标签形式来引入他的
			// 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML内容
		Vue.component('myCom1',Vue.extend({
            template:'<h3>这是使用 Vue.extend 创建的组件0</h3>'
        }))

2. 创建组建的方式二

        // 直接使用Vue.component创建
			// 无论是那种方式创建出来的组件，组建的 template(模板) 属性指向的模板内容，必须有且只能有 唯一的一个根元素
		Vue.component('myCom1',{
            template:'<h3>直接使用component创建的组件</h3>'
        })

3.组件创建的方式三

<body>
    <!-- 在被控制的#app外面，使用 template 元素，定义组件的模板结构 -->
    <template id="tmpl">
        <div>
            <h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示</h1>
            <h4>这个好用</h4>
            <h4>注意 template 其中也是只能有一个元素</h4>
        </div>
    </template>

    <!-- 这是调用的代码 -->
    <div id="app">
        <my-com1></my-com1>
    </div>
    <script>
        // 这里定义
        Vue.component('myCom1',{
            template:'#tmpl'
        })
        var app = new Vue({
            el:'#app',
        })
    </script>
</body>

二、定义私有组件

        // 直接在 new Vue 中使用 components 创建组件
			// 此处组件的定义与以上方法一样
			// 只能在 id=app 的 div 中调用该组件
		var app = new Vue({
            el:'#app',
            components: {
                loginer:{
                    template:'#tmpl2'
                }
            }
        })

三、组件中的 data 和 methods

组件可以有自己的 data 数据
组建的 data 和实例（new Vue）的 data 有点不一样，实例中的 data 可以为一个对象，但是组件中的 data 必须是一个方法
组件中的 data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
组件中的data数据，使用方式和实例中的 data 使用方式完全一样

四、使用 v-if 和 v-else 进行组件切换

	<template id="log">
        <h1>登陆界面</h1>
    </template>

    <template id="reg">
        <h1>注册界面</h1>
    </template>   

	<div id="body">
        <a @click.prevent="flag=true">登录</a>
        <a @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <script>
        Vue.component('login',{
            template:'#log'
        })

        Vue.component('register',{
            template:'#reg'
        })

        var vm = new Vue({
            el:"#body",
            data:{
                flag:true
            },
            methods:{
            },
        })
    </script>

Jumbuck_10

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的组件化概念、方法及使用案例

1. 组件化和模块化模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组建的重用什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。一、此处创建的组件均为公共组件1.创建组件的方式一 // 1.1 使用 Vue.extend 来创建全局的 Vue 组件 var co
复制链接

扫一扫