add Vue 2.x：父组件给子组件传值
This commit is contained in:
qianguyihao
parent
cb3949e2ed
commit
4153358e09
@ -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网址：
|
||||
```
|
||||
|
||||
|
||||
运行效果如下：
|
||||
运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果）
|
||||
|
||||
|
||||
|
||||
|
||||
@ -763,6 +763,80 @@ Vue.component('myComponent', myAccount); //第一个参数是组件的名称（
|
||||
|
||||
|
||||
|
||||
## 多个组件切换时，通过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`）。
|
||||
|
||||
99
21-Vue基础/06-Vue组件之间的传值.md
Normal file
99
21-Vue基础/06-Vue组件之间的传值.md
Normal file
@ -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中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user