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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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 和 MySQL 基础教程(二)
2006/10/09 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
微信公众号H5支付接口调用方法
2019/01/10 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
简单了解什么是神经网络
2017/12/23 Python
python实现简易版计算器
2020/06/22 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python实现静态服务器
2019/09/05 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python 爬取疫情数据的源码
2020/02/09 Python
python如何输出反斜杠
2020/06/18 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
副厂长岗位职责
2014/02/02 职场文书
《影子》教学反思
2014/02/21 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
投诉书格式范本
2015/07/02 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers