Vue组件化开发

最新推荐文章于 2022-04-28 11:15:09 发布
最新推荐文章于 2022-04-28 11:15:09 发布
阅读量167 收藏
点赞数 1
分类专栏： JS 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42418847/article/details/106551789
版权

组件化开发思想

标准、分治、重用、组合
Web Components通过创建封装好功能的定制元素来实现

组件注册

1.全局组件注册
语法：
Vue.component(组件名称,{
data:组件数据，
template:组件模板内容
})
实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>

    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('button-counter', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="handle">点击了{{count}}次</button>',
            methods: {
                handle: function() {
                    this.count += 2;
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>
</body>

</html>
  1. 组件的数据是独立的，相互之间不受影响
  2. data必须是一个函数
  3. 组件模板内容必须是单个根元素，可嵌套
  4. 组件模板内容可以是模板字符串
  5. 使用驼峰式命名组件只能使用在字符串模板中

2.局部组件注册
语法：

var ComponentA={}
var ComponentB={}
var ComponentC={}
new Vue({
el:'#app'
components:{
'component-a':ComponentA,
'component-b':ComponentB
'component-c':ComponentC,
}
})

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
    </div>

    <script src="./vue.js"></script>
    <script>
        var ComponentA = {
            data: function() {
                return {
                    msg: 'A'
                }
            },
            template: '<h1>{{msg}}</h1>'
        };
        var ComponentB = {
            data: function() {
                return {
                    msg: 'B'
                }
            },
            template: '<h1>{{msg}}</h1>'
        };
        var ComponentC = {
            data: function() {
                return {
                    msg: 'C'
                }
            },
            template: '<h1>{{msg}}</h1>'
        };
        var vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                'component-a': ComponentA,
                'component-b': ComponentB,
                'component-c': ComponentC
            }
        });
    </script>
</body>

</html>

局部组件只能在注册它的父组件中使用

Vue调试工具

1.下载(Chrome)
下载地址：
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2.使用
先解压，然后在chrome浏览器地址栏中输入chrome://extensions/
然后将解压后的CRX文件拖进来，添加插件
成功界面如下：
在这里插入图片描述
如果vue使用不了，则打开详细信息，打开“允许访问文件网址”按钮：
在这里插入图片描述
然后就能在调试栏中看到vue:
在这里插入图片描述
这样就可以开始使用了

组件间数据交互

父组件向子组件传值

1.组件内部通过props接收传递过来的值
语法：

 Vue.component('menu-item',{
            props:['title'],
            template:'<div>{{title}}</div>'
        })

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <menu-item :title="title" :content="content"></menu-item>

    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['title', 'content'],
            template: '<div>{{title}},{{content}}</div>'
        });
        var vm = new Vue({
            el: "#app",
            data: {
                title: '我是父组件传递的title',
                content: '我是父组件传递的content'
            }
        })
    </script>
</body>

</html>

当props数值类型为对象数组时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <menu-item :arr_obj='arr_obj'></menu-item>

    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['arr_obj'],
            template: `
            <div>
            <p :key='index' v-for='(item,index) in arr_obj'>
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
            </p>
            </div>
         
            `
        });
        var vm = new Vue({
            el: "#app",
            data: {
                arr_obj: [{
                    name: '大花',
                    age: 18
                }, {
                    name: '小花',
                    age: 17
                }]
            }
        });
    </script>
</body>
</html>

一些注意：
props中使用驼峰形式，模板中需要使用短横线的形式
props传递数据是单向数据流

子组件向父组件传值

1.子组件通过自定义事件向父组件传递信息

<button @click='$emit("enlarge-text",5)'>扩大字体</button>

2.父组件监听子组件的事件

<menu-item @enlarge-text='fontsize+=$event'></menu-item>

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p :style='{fontSize:fontSize+"px"}'>我是父组件</p>
        <menu-item @enlarge-text='handle($event)'></menu-item>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('menu-item', {
            template: `
            <div>
                <button @click='$emit("enlarge-text",5)'>增大字号</button>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                fontSize: 10
            },
            methods: {
                handle: function(value) {
                    this.fontSize += value;
                }
            }
        });
    </script>
</body>

</html>
非父子组件传值

1.单独的事件中心管理组件间的通信

var eventHub=new Vue();

2.监听事件与销毁事件

//监听事件
eventHub.$on('add-todo',addtodo)
//销毁事件
eventHub.$off('add-todo')

3.触发事件

//触发事件
eventHub.$emit('add-todo',id)

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click='handle'>销毁事件</button>
        <test-first></test-first>
        <test-second></test-second>

    </div>

    <script src="./vue.js"></script>
    <script>
        //事件中心
        var eventHub = new Vue();
        Vue.component('test-first', {
            data: function() {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                <div>first:{{num}}</div>
                <div>
                    <button @click='handle'>first</button>
                 </div>
            </div>
            `,
            methods: {
                handle: function() {
                    //触发兄弟组件的事件
                    eventHub.$emit('second-event', 1)
                }
            },
            mounted: function() {
                //监听事件
                eventHub.$on('first-event', (value) => {
                    this.num += value;
                })
            }
        });
        Vue.component('test-second', {
            data: function() {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                <div>second:{{num}}</div>
                <div>
                    <button @click='handle'>second</button>
                 </div>
            </div>
            `,
            methods: {
                handle: function() {
                    eventHub.$emit('first-event', 1)
                }
            },
            mounted: function() {
                //监听事件
                eventHub.$on('second-event', (value) => {
                    this.num += value;
                })
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                handle: function() {
                    eventHub.$off('first-event');
                    eventHub.$off('second-event');
                }
            }
        });
    </script>
</body>

</html>

组件插槽

父组件向子组件传递模板内容

1.位置

Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
                <strong>Something I want to say:</strong>
                <slot></slot>
            </div>
            `
        });

2.内容

 <alert-box>Hello World!!!</alert-box>

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <alert-box>Hello World!!!</alert-box>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
                <strong>Something I want to say:</strong>
                <slot></slot>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述

具名插槽

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- ------------用法1-------------- -->
        <base-layout>
            <h1 slot="header">我是Header</h1>
            <h2>我是main</h2>
            <h1 slot="footer">我是footer</h1>
            <h2>我是main</h2>
        </base-layout>
        <!-- -------------用法2------------- -->
        <base-layout>
            <template slot="header">
                <h1>我是header</h1>
                <h1>我是header</h1>
            </template>
        </base-layout>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('base-layout', {
            template: `
            <div>
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述

作用域插槽

父组件对子组件的内容进行加工

实例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <fruit-list :list='list'>
            <template slot-scope="slotProps">
                <span v-if="slotProps.info.id==2" class="current">
                    {{slotProps.info.name}}
                </span>
                <span v-else>{{slotProps.info.name}}</span>
            </template>
        </fruit-list>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('fruit-list', {
            props: ['list'],
            template: `
            <div>
                <ul>
                    <li :key='index' v-for='(item, index) in list'>
                        <slot :info="item">{{item.name}}</slot>
                    </li>
                </ul>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            }
        });
    </script>
    <style scoped>
        .current {
            color: brown;
            font-size: 20px;
            font-weight: 700;
        }
    </style>
</body>

</html>

效果：
在这里插入图片描述

yetta3370
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 组件设计思考
郊眠寺
06-18 474
我们知道, Vue 是基于 MVVM 设计的一个前端框架, 是数据驱动页面显示的架构. 同时, 它是 Html 的模板引擎, 是 Vue 模板通过翻译器翻译成 Hmtl 语言. 这个 Vue 模板, 也就是组件, 在 Vue 中, 一切皆是组件.在我们分析某一个页面组件结构之前, 我们必须要从 main.js 入口 的 开始. 原因是:这里除非只用 Vue 做移动 APP, 不用路由做导航.简化了不必要的东西 router.js 这里简化了, 可以看到里面路由分模块了, 里面引入 user 模块, use
Vue——组件化开发
鹿蹊zz的博客
08-09 2195
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
vue开发之组件设计
zygswo的博客
04-10 718
什么是组件？ 以前我们写重复的代码时总是复制黏贴，一方面会增加代码量，降低执行和开发效率，另一方面也会增加维护的负担。现在好了，有了组件，我们可以将重复的代码进行封装以便于重复使用。 1. 创建组件 const compo1 = Vue.extend({ //组件的模板有且只能有一个根元素，否则会报错，因此最好将多个元素 放到div或其他容器中 template: ‘<p>my name is {{name}}</p>’, //组件的data区域必须是个函数而不是对象.
Vue基础知识总结 4：vue组件化开发
学Java，找哪吒
07-21 1万+
一、函数式编程 1、函数式编程简介 函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。 和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 filter函数自动过滤对象的所有元素，返回true才会存入指定对象； Reduce函数对数组内部的所有元素进行汇总； 2、代码实例 <!DOCTYPE
VueJs的组件化
欣欣博客
11-10 5957
组件化： 目的：让页面的元素的使用性和复用性更高。 使用： 1.通过Vue.extend()声明组件 2.将组件注册到Vue容器里面 3.声明Vue管理边界 定义： 组件就是将一些html+css+js封装成了一个整体，通过整体之间嵌套实现页面构建 1.声明组件： Vue.extend({}) 实现对象里面的一些参数 达到组装组件过程 Vue.extend() Vue是个构造
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
06_Vue组件化开发基础.pptx
最新发布
01-25
"06_Vue组件化开发基础" 本资源摘要信息主要介绍了Vue组件化开发的基础知识，包括组件化开发的思想、注册Vue的全局组件、注册Vue的布局组件、Vue的开发模式解析、Vue的项目目录分析等内容。 一、组件化开发思想 ...
Vue关于组件化开发知识点详解
10-15
下面将详细讲解Vue组件化的关键知识点： 1. **全局组件注册**：Vue.component()方法用于全局注册组件，注册后的组件可以在任何地方使用。例如，创建一个名为`first-component`的全局组件，包含一个计数器功能： ``...
Vue组件化
qq_61541602的博客
04-28 1343
1.什么是组件化？ 在我们将一个页面的处理逻辑全部放在一起时，处理起来就非常的麻烦，而且不利于后期的管理与维护。 我们可以将一个页面拆分成一个个的功能块，每个功能块用来完成属于自己这部分独立的功能。那么这样做之后整个页面就会变得非常容易管理与维护。 Vue组件化： 组件化是vue.js中的重要思想，他提供一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都可以被抽象成一颗组件树。而在有了组件化思想，我们就可以在开发过程中尽可能地将页面拆分成一个个小的、可复用的组件。那么在
vue2(二)组件化
xuan971130的博客
04-21 976
一、组件化 1.1 简单认识组件化 1.2 全局组件与局部组件 全局组件:可以在多个Vue实例中使用。 局部组件：只能在单个Vue实例中使用。 在项目开发中，一般只设置一个vue实例，一般采用局部组件的方式。 <body> <div id="app"> <mycpn></mycpn> </div> <div id="app2"> <mycpn&.
vue组件化
Shirley_0513的博客
07-16 119
全局组件 root component 父组件，跟组件 中包含两个navbar子组件 scrit标签引入的弊端： 没有高亮，没有代码提示 ，css被遗忘 模块化开发会引入 .vue文件 ， 里面包含html js css Vue.component('navbar",{ template : "<div>navbar</div>" //dom结构 }) 封装的组件访问不到外面的方法 一个自定义组件中只能有一个根元素（不能有多个平级的标签） 父子之间的状态无法共享，不能直接访问（
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4006
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上
前端361
10-08 3437
vue是一套用于构建用户界面的渐进式框架 参考：https://blog.csdn.net/tangxiujiang/article/details/79594860 https://blog.csdn.net/weixin_41049850/article/details/79431682 以下是看过很多渐进式框架的概念，把几个相对全面的进行了总结： 渐进式框架：只做自己该做的事情，不去...
Vue全家桶之组件化开发
程序员哆啦A梦，蓝胖子
01-06 6782
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，vue调式工具的用法，组件的方式来实现业务逻辑功能。 组件化开发思想，组件注册，组件调式，组件间的数据交互，组件插槽 组件化规范，就是多的可能性重用 全局组件注册语法...
Vue 组件化开发
热门推荐
花神的博客
12-20 3万+
Vue 组件化开发 提示： 本次分享知识点基于 vue.js，需要对 vue.js 有一定的了解。 什么叫做组件化 vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内...
vue组件化开发的优点
05-21
Vue组件化开发有以下几个优点： 1. 可复用性高：组件化开发可以提高组件的可重用性和可维护性，通过组件化开发，可以将一个大型应用程序拆分成多个小型的组件，每个组件都相对独立，可以在不同的项目中复用。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值