vue2.X组件学习心得(新手必看篇)


Posted in Javascript onJuly 05, 2017

VUEJS学习网址:https://cn.vuejs.org/

此文章是用来记录自己的学习和实践心得。

关注点:父子组件之间的通信

看图说话:

vue2.X组件学习心得(新手必看篇)

Pass Props

子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据;

父组件的数据更新时,子组件的prop会跟着更新;

此数据流动是单向的(看着);

Emit Events

子组件使用$.emit(fn)向外抛出自己的内部触发的事件;

父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件;

以上为通用语,具体分析

子组件可以接收一个字符串,在子组件内部可以用{{label}}使用 

<v-input label="姓名"></v-input>

子组件可以接收动态参数

<input v-model="msg" />
<v-profile :message="msg"></v-profile>

子组件接收到数据之后想处理一下不小心改了怎么办?

给prop创建一个副本(建议深拷贝),处理副本,不动prop;

父组件的数据改变后,子组件的prop会自动更新,但是这个prop的副本不会啊?

使用watch监听这个prop,改变时更新副本;

子组件的prop副本改变了想要通知父组件怎么办?

使用watch监听这个副本,改变时向外抛出自己的内部触发的事件;
。。。

其实以上???在2.3有了更好的方法,之前的就是看看。

.sync修饰符

***父组件***
<input v-model="msg" />
<v-profile :message.sync="msg"></v-profile>
***子组件***
$.emit('update:message',newValue)

我是用了一下然后喜闻乐见的修改成功了,但是打开控制台有报错!!!

vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

子组件想要触发父组件可以emit(父组件需要监听才会触发),父组件触发子组件事件呢?

通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

但是!$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

关注点:非父子组件之间的通信

使用空的vue实例作为中央事件总线

var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)


// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

考虑vuex

关注点:在组件中使用slot

首先,在父组件中给子组件标签中间放置内容是无效的。然后slot出场。

白话版本:

匿名slot:
  slot标签存在与子组件template中;
  子组件在父组件中使用的时候,子组件标签中的结构会在编译后替换子组件的slot标签;
  如果子组件中没有slot,则父组件中子组件标签中的内容会消失;
具名slot:
  顾名思义,是具有name属性的slot标签;并有匿名组件的特性(以上);
  子组件在父组件中使用的时候,子组件中的结构中会有某些标签拥有slot属性并赋值,这些会在编译后替换子组件的相应slot标签;

一句话解释:主要的内容是写在父组件中的子组件标签中,编译后插入子组件的相应位置

讲真,说到这里我自己都不明白要slot干嘛。

官方讲解入口

官方给了个布局的例子:

<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot>
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>
<app-layout>
 <h1 slot="header">这里可能是一个页面标题</h1>
 <p>主要内容的一个段落。</p>
 <p>另一个主要段落。</p>
 <p slot="footer">这里有一些联系信息</p>
</app-layout>

但是好像也没什么好推荐的。(个人看法)

再想想:

子组件的template中至少有一个slot标签,slot标签中的内容是default content。什么场景能用到呢?我想到了刚刚写的表格数据筛选,当时用的是v-if,v-else。如果改成slot呢。。。

作用域插槽

语法:

<template scope="props">
...
</template>

——————这个官网例子我是好半天才明白

<my-awesome-list :items="items">
 <!-- 作用域插槽也可以是具名的 -->
 <template slot="item" scope="props">
  <li class="my-fancy-item">{{ props.text }}</li>
 </template>
</my-awesome-list>

以上的template中的props其实和子组件的props属性是相同的,子组件传递了什么prop,它就接收什么,像是下边的传了个text

<ul>
 <slot name="item"
  v-for="item in items"
  :text="item.text">
  <!-- 这里写入备用内容 -->
 </slot>
</ul>

我看了很长很长时间,为什么要这么拐个弯呢。。。

————一夜过后—————

这样内容更灵活:数据是相同的(父组件提供数据),子组件负责了循环(添加逻辑),父组件引用子组件时插入的作用域插槽的模板决定了(展示的形式)!这分工!!!点个赞!!!

我修改了一下自己的table然后页面展示了个空白。之后发现问题出在子组件往外传数据的时候变量名不能用"name"。修改掉。

关注点:动态组件使用

通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:很适用于制作Tab类的效果

<component v-bind:is="currentView" :data1="data1" :data2="data2">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

在methods属性中定义一个函数修改currentView即可。

视情况可以配合 keep-alive 避免重新渲染

在子组件上放置activate钩子做切换时的工作:done() //放到钩子最后,表示执行工作完毕,可以切换组件,配合keep-alive使用,activate钩子只执行一次

子组件接收数据和以往相同,只是这一次都写在了component中,只是如此的话,每个子组件都需要有这些接口(prop)
暂时说到这里,突然得回头看一下react,没时间了,回头会继续。

以上这篇vue2.X组件学习心得(新手必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
eval的两组性能测试数据
Aug 17 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
利用JS实现数字增长
Jul 28 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
用vue写一个日历
Nov 02 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
You might like
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
js模糊查询实例分享
2016/12/26 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
详解Python的Django框架中的模版相关知识
2015/07/15 Python
深入理解Python装饰器
2016/07/27 Python
pycharm安装和首次使用教程
2018/08/27 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
业务助理岗位职责
2013/11/18 职场文书
会计个人实习计划书
2014/08/15 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
护理见习报告范文
2014/11/03 职场文书
电子商务实训报告总结
2014/11/05 职场文书
西安大雁塔导游词
2015/02/10 职场文书
电影地道战观后感
2015/06/04 职场文书
python for循环赋值问题
2021/06/03 Python