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 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python生成式的send()方法(详解)
2017/05/08 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
Spy++的使用方法及下载教程
2021/01/29 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python