add Vue 2.x：父组件给子组件传值

smyhvae · smyhvae · commit 37b7b7a391ea · 2018-06-18T23:57:55.000+08:00
diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md
@@ -501,7 +501,7 @@ animate.css网址：
 
 <body>
     <div id="app">
-        <input type="button" value="快到碗里来" @click="flag=!flag">
+        <input type="button" value="加入购物车" @click="flag=!flag">
         <!-- 1. 使用 transition 元素把 小球包裹起来 -->
         <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
             <div class="ball" v-show="flag"></div>
@@ -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
@@ -763,6 +763,80 @@ Vue.component('myComponent', myAccount); //第一个参数是组件的名称（
 ![](http://img.smyhvae.com/20180617_1957.gif)
 
 
+## 多个组件切换时，通过mode属性添加过渡的动画
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateX(150px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.5s ease;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <a href="" @click.prevent="comName='login'">登录</a>
+        <a href="" @click.prevent="comName='register'">注册</a>
+
+        <!-- 通过 mode 属性,设置组件切换时候的 过渡动画 -->
+        <!-- 【重点】亮点是 mode="out-in" 这句话 -->
+        <transition mode="out-in">
+            <component :is="comName"></component>
+        </transition>
+
+    </div>
+
+    <script>
+        // 组件名称是 字符串
+        Vue.component('login', {
+            template: '<h3>登录组件</h3>'
+        })
+
+        Vue.component('register', {
+            template: '<h3>注册组件</h3>'
+        })
+
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+运行效果：
+
+20180618_2240.gif
+
+如上方代码所示，多个组件切换时，如果要设置动画，可以用`<transition>`把组件包裹起来。需要注意的是，我给`<transition>`标签里添加了`mode="out-in"`这种模式，它表示第一个组件消失之后，第二个组件才会出现。如果没有这个mode属性，效果如下：（第一个组件准备消失的时候，第二个组件马上就准备出现，这不是我们想要的效果）
+
+20180618_2245.gif
+
+
 ## 我的公众号
 
 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/21-Vue基础/06-Vue组件之间的传值.md
@@ -0,0 +1,99 @@
+
+
+## 父组件向子组件传值
+
+
+我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。
+
+需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。
+
+代码举例：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <!--第二步：父组件在引用子组件的时候， 通过 属性绑定（v-bind:）的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
+        <component1 v-bind:parent-msg="msg"></component1>
+    </div>
+
+    <!-- 定义子组件的模板 -->
+    <template id="myTemplate">
+        <h1 @click="change">我是子组件。我想使用父组件中的数据parentMsg： {{ parentMsg }}</h1>
+    </template>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                msg: '父组件中的数据123'
+            },
+            methods: {},
+            components: {
+                // 子组件默认无法访问到 父组件中的 data 中的数据 和 methods 中的方法
+                component1: {
+                    template: '#myTemplate',
+                    data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
+                        // data 上的数据，都是可读可写的
+                        return {
+                            title: '子组件私有的数据 title',
+                            content: '子组件私有的数据 content'
+                        }
+                    },
+                    // 注意： 组件中的 所有 props 中的数据，都是通过 父组件 传递给子组件的
+                    // props 中的数据，都是只读的，无法重新赋值（也就是说，）
+                    props: ['parentMsg'], // 第一步：把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
+                    directives: {},
+                    filters: {},
+                    components: {},
+                    methods: {
+                        change() {
+                            // 下面这行会报错，因为子组件不要直接修改父组件中的data数据
+                            // this.parentmsg = '被修改了'
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+效果如下：
+
+20180618_2350.png
+
+代码截图如下：
+
+20180618_2355.png
+
+
+**父组件给字组件传值的步骤**：
+
+> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。
+
+子组件中，data中的数据和props中的数据的区别：
+
+-
+
+
+- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。
+
+
+
+
+
