From 4153358e09a53c17f6ed5162754c52141847cba8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 18 Jun 2018 23:57:55 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue=202.x=EF=BC=9A=E7=88=B6=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=BB=99=E5=AD=90=E7=BB=84=E4=BB=B6=E4=BC=A0=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 21-Vue基础/04-Vue动画.md | 7 ++- 21-Vue基础/05-Vue组件.md | 74 ++++++++++++++++++++++ 21-Vue基础/06-Vue组件之间的传值.md | 99 ++++++++++++++++++++++++++++++ 3 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 21-Vue基础/06-Vue组件之间的传值.md diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md index eabbf32..608228c 100644 --- a/21-Vue基础/04-Vue动画.md +++ b/21-Vue基础/04-Vue动画.md @@ -501,7 +501,7 @@ animate.css网址：
- +
@@ -536,7 +536,8 @@ animate.css网址： afterEnter(el) { // 动画完成之后，会调用 afterEnter // console.log('ok') - this.flag = !this.flag //动画结束后，让小球消失（直接让 flag 取反即可） + // 动画结束后，让小球消失（直接让 flag 取反即可） + this.flag = !this.flag // 因为最开始的时候，小球就是处于消失的状态，这行代码可以让小球的动画重新开始 } } }); @@ -548,7 +549,7 @@ animate.css网址： ``` -运行效果如下： +运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果） ![](http://img.smyhvae.com/20180616_1618.gif) diff --git a/21-Vue基础/05-Vue组件.md b/21-Vue基础/05-Vue组件.md index 93b02f3..c710c8f 100644 --- a/21-Vue基础/05-Vue组件.md +++ b/21-Vue基础/05-Vue组件.md @@ -763,6 +763,80 @@ Vue.component('myComponent', myAccount); //第一个参数是组件的名称（ ![](http://img.smyhvae.com/20180617_1957.gif) +## 多个组件切换时，通过mode属性添加过渡的动画 + + + +```html + + + + + + + + Document + + + + + +
+ 登录 + 注册 + + + + + + + +
+ + + + + +``` + +运行效果： + +20180618_2240.gif + +如上方代码所示，多个组件切换时，如果要设置动画，可以用``把组件包裹起来。需要注意的是，我给``标签里添加了`mode="out-in"`这种模式，它表示第一个组件消失之后，第二个组件才会出现。如果没有这个mode属性，效果如下：（第一个组件准备消失的时候，第二个组件马上就准备出现，这不是我们想要的效果） + +20180618_2245.gif + + ## 我的公众号 想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/21-Vue基础/06-Vue组件之间的传值.md new file mode 100644 index 0000000..6014489 --- /dev/null +++ b/21-Vue基础/06-Vue组件之间的传值.md @@ -0,0 +1,99 @@ + + +## 父组件向子组件传值 + + +我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。 + +需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。 + +代码举例： + +```html + + + + + + + + Document + + + + +
+ + +
+ + + + + + + + +``` + + +效果如下： + +20180618_2350.png + +代码截图如下： + +20180618_2355.png + + +**父组件给字组件传值的步骤**： + +> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。 + +子组件中，data中的数据和props中的数据的区别： + +- + + +- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。 + + + + +