Vue组件化开发

最新推荐文章于 2020-11-01 19:36:06 发布
最新推荐文章于 2020-11-01 19:36:06 发布
阅读量407 收藏 1
点赞数
文章标签： Vue组件开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44202037/article/details/103337595
版权

Vue组件化开发

组件化开发思想

1.现实中的组件开发思想体现
在这里插入图片描述
2.编程中的组件化思想体现
在这里插入图片描述
3.组件化规范: Web Components

组件注册

全局组件注册语法
在这里插入图片描述
组件用法

在这里插入图片描述
组件注册注意事项
1.data必须是一个函数

  • 分析函数与普通对象的对比

2.组件模板内容必须是单个跟元素

  • 分析演示实际的效果

3.组件模板内容可以是模板字符串

  • 模板字符串需要浏览器提供支持（ES6语法）

4.组件命名方式

  • 短横线方式
Vue.component('my-component', {/*...*/})
  • 驼峰方式
Vue.component('MyComponent', {/*...*/})

注意: 如果使用驼峰命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件
局部组件注册

var ComponentA = {
	data: function() {
		return {
			msg: 'HelloWord'
		}
	},
	template: '<div>{{ msg }}</div>'
},
var ComponentB = {/*...*/},
var ComponentC = {/*...*/}
new Vue({
	el: '#app',
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB,
		'component-c': ComponentC	
	}
})

Vue 调试工具

调试工具安装

在这里插入图片描述
调试工具用法
在这里插入图片描述

组件间数据交互

父组件向子组件传值

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

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

2.父组件通过属性将值传递给子组件

<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>

3.props属性命名规则

  • 在props中使用驼峰形式，模板中需要使用短横线的形式
  • 字符串形式的模板中没有这个限制
Vue.component('menu-item', {
	//在 JavaScript 中是驼峰式的
	props: ['menuTitle'],
	template: '<div>{{ menuTitle }}</div>'
})
<-- 在html中是短横线方式的 -->
<menu-item menu-title="nihao"></menu-item>

4.props属性值类型

  • 字符串 String
  • 数值 Number
  • 布尔值 Boolean
  • 数组 Array
  • 对象 Object

子组件向父组件传值

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

<button v-on:click='$emit("enlarge-text") '>扩大字体</button>

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

<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>

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

<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>

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

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

非父子组件间传值

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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          // 触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>
</html>

组件插槽的作用

组件插槽的作用

  • 父组件向子组件传递内容
    在这里插入图片描述

组件插槽基本用法
1.插槽位置

Vue.component('alert-box', {
	template: `
		<div class="demo-alert-box">
			<strong>Error!</strong>
			<slot></slot>
		</div>
		`
})

2.插槽内容

<alert-box>Something bad happened.</alert-box>

具名插槽用法
在这里插入图片描述
作用域插槽

  • 应用场景: 父组件对子组件的内容进行加工处理

在这里插入图片描述

Omc 꿈 범
关注
vue开发（一）组件化开发
baizaozao的博客
09-30 309
组件构建 extend构建 调用Vue.extend() var myCom = Vue.extend({ template: '<div>这是我的组件</div>' })template标签构建 需要在标签上添加id属性 <template id="myCom"> <div>这是template标签构建的组件</div> </template>scr
Vue组件化开发（原有项目的改造）
weixin_30648963的博客
08-29 266
将组件定义成一个js和css，然后供其他页面进行调用 demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javas...
12-Vue的组件化开发(二)
蓝带的博客
03-03 152
组件通信-父组件向子组件传递数据 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"> <cpn...
Vue 项目中各种痛点问题及方案
前端达人
09-24 6770
作者：愣锤原文：https://juejin.im/post/6844903632815521799最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
06_Vue组件化开发基础.pptx
最新发布
01-25
"06_Vue组件化开发基础" 本资源摘要信息主要介绍了Vue组件化开发的基础知识，包括组件化开发的思想、注册Vue的全局组件、注册Vue的布局组件、Vue的开发模式解析、Vue的项目目录分析等内容。 一、组件化开发思想 ...
使用vue+ts搭建ui库
05-13
使用vue + ts来构建一个按钮ui库 目前还没上传npm 里面使用到了less 详细请下载使用
vue与后台交互数据（vue-resource）
键盘哥的博客
09-03 6481
需要引入库：vue-resource &lt;script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"&gt;&lt;/script&gt; 1.获取普通文本数据  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;
Vue组件踩坑与心得
qq_40479190的博客
10-29 1649
事实上的确如此，产品需求总是千奇百怪。正如我公司现在的产品，引用的是elemen-ui的库，但是无法级联多选，下拉多选的展现形式不对，穿梭框无法上下移动等各种需求逼迫我们只能自己去写组件实现了。 自己手写实现了两个组件之后，先写一篇记录一些坑和学会的新东西 1、子组件不允许修改父组件数据 之前在写angular的父子组件传递数据，子组件可以修改父组件传递进来的数据。不过在Vue中
如何从零创建一个vue项目
一个有节操的码农
09-26 967
一、如何创建一个vue-cli项目 安装cnpm，执行命令npm install -g cnpm 安装vue-cli，执行命令cnpm insall -g vue-cli 初始化项目，vue init webpack test 二、在vue-cli项目中使用scss语法 1.安装sass-loader和node-sass（sass-loader依赖于node-sass） npm inst...
Vue 项目里戳中你痛点的问题及解决办法（更新）
weixin_33738578的博客
07-03 916
最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V^列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题axios封装和api接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所...
vue中的登录注册的理解
loveliujinggive的博客
11-01 612
登录我是用封装的api接口来写的，挺好用的，最重要的就是你接口传参和你写的input的参数要进行对比，以下就是代码 注册和登录的一样好吧不过是需要更多的细心，注册好了要么直接跳转首页要么去设置密码也能要看你们自己的需要了，我的是跳转设置密码页： 如果需要vue中的api封装就关注我或者用这个地址 https://blog.csdn.net/loveliujinggive/article/details/109433143 谢谢支持！ ...
vue 项目中遇到问题解决记录
weixin_41888013的博客
07-18 4264
目录   1、el-input标签中根据输入框的内容，实时计算某值 2、要在弹出框中使用el-dialog标签触发弹出框时，弹出框层次要进行设置 3、浏览器端缓存数据 下面针对localStorage 和 sessionStorage做个对比分析 4、待续 1、el-input标签中根据输入框的内容，实时计算某值         利用input属性触发某方法来进行计算   例如：&l...
vue的组件化开发（组件通信，插槽，递归组件）
斗师——Ace
01-10 729
1. vue组件的通信：包括子通父，父通子，兄弟通信，祖代与后代通信，vuex全局状态管理。 1.1 父向子通信：props属性和refs属性。 1.1.1props属性： //在子组件中 props:{ age: { type: Number, //父组件传递过来age变量的类型,包括String、Number、Boolean、Array、...
Vue组件注册与数据传递
weixin_30808693的博客
05-01 211
父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是子组件</div>' }); //注册名为'child'的组件 Vue.component('child',child); (2)构建注册父组...
Vue组件的注册以及各组件之间的传值
南墙的博客
08-25 607
Vue组件之间的传值 在页面的开发过程中，我们会将页面拆分成一块一块的，那每一块我们都可以看成是一个组件，这就是组件开发。 组件也是Vue的一个实例，是一个可以复用的实例 ...
Vue全家桶之组件化开发
程序员哆啦A梦，蓝胖子
01-06 6788
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，vue调式工具的用法，组件的方式来实现业务逻辑功能。 组件化开发思想，组件注册，组件调式，组件间的数据交互，组件插槽 组件化规范，就是多的可能性重用 全局组件注册语法...
vue组件化开发的优点
05-21
Vue组件化开发有以下几个优点： 1. 可复用性高：组件化开发可以提高组件的可重用性和可维护性，通过组件化开发，可以将一个大型应用程序拆分成多个小型的组件，每个组件都相对独立，可以在不同的项目中复用。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值