Vue学习之路（六）---父组件与子组件之间的数据传递

前面我讲了基本组件的写法，现在一起学下父组件怎样传递数据到子组件，以及子组件传递数据到父组件的

1.父组件传递数据到子组件

1.1 通过props传递

父组件App.vue中

<component-a big-num=98></component-a>//传递big-num

父组件源码

<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num=98></component-a>
</div>
</template>

<script>
import Vue from 'Vue'
import componentA from './components/a'

export default {
components: {componentA},
name: 'app',
data () {
return {
value: '',
valueArr: [],
msg: 'Welcome to Your Vue.js App',
name: 'Julian',
sex: 'Man',
age: 18,
isClassA: true,
isClassB: false,
hasErr:false,
html: '<span style="color: red">第一个</span>',
listArr: [
{
name: 'a',
age: 18
},
{
name: 'b',
age: 19
},
{
name: 'c',
age: 20
}],

4000
listObj: {age: 18,name: 'zs',sex: 'man'},
classArr: ['classA','classB'],
classObj: {'classA': true}
}
},
methods: {
add: function (){
this.listArr.push({
name: 'd',
age: 100
});
Vue.set(this.listArr,0,{name:'ls',age:150});
this.hasErr = !this.hasErr;
},
comA (msg) {
console.log(msg);
},
getNum (newVal, oldVal) {
console.log('得到数据了');
console.log('newVal----'+ newVal +';oldVal-----'+oldVal);
}
},
computed: {
valueWithoutNum : function (){
return this.value.replace(/\d/g,'');
}
},
watch: {
value: function (newVal, oldVal) {
this.getNum(newVal, oldVal);
}
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
.classA {
color: red;
}
.classB {
background: blue;
}
</style>

子组件a.vue中

在子组件中需要用props来接收父组件传过来的值，并且props可以可以用数组，也可以用对象，数组的话，看下面的代码就行了，如果是对象的话，props: {‘big-num’:[String,Number]}可以规定从父组件传过来的数据的值类型

<template>
<div>{{msg}}
<button @click="emitEvent">myEvent</button>
{{bigNum}}
</div>
</template>
<script>
export default {
props: ['big-num'],
data () {
return {
msg: 'I am a template!Over',
}
},
methods: {
emitEvent () {
this.$emit('my-event',this.msg);
}
}
}
</script>

1.2 通过slot

卡槽的写法，现在子组件定义slot

<template>
<div>{{msg}}
<button @click="emitEvent">myEvent</button>
{{bigNum}}
<slot name="header">this is header</slot>
<p>luan qi ba zao</p>
<slot name="footer">this is footer</slot>
</div>
</template>

然后在父组件中插入标签，通过卡槽的name来指定插入到子组件的位置

<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num='aaaa'>
<p slot="header">这是我插入的header</p>
<p slot="footer">这是我插入的footer</p>
</component-a>
</div>
</template>

结果图

2.子组件传递数据到父组件

子组件传递数据到父组件的方式是通过事件的形式。子组件中自定义一个事件，然后通知父组件监听该事件，具体代码如下：

//子组件中
export default {
props: {'big-num': [String,Number]},
data () {
return {
msg: 'I am a template!Over',
}
},
methods: {
emitEvent () {
this.$emit('my-event',this.msg);//向父组件中传递my-event并且传一个参数msg
}
}
}

//父组件中
<template>
<div id="app">
<!--<input type="text" v-model="value"/>-->
<component-a big-num='aaaa' @my-event="comA"><!--通过v-on也就是@来监听my-event-->
<p slot="header">这是我插入的header</p>
<p slot="footer">这是我插入的footer</p>
</component-a>
</div>
</template>

//methods中
methods: {
comA (msg) {//接收子组件传过来的事件和参数
console.log(msg);
}
}

3.动态更新组件

通过标签包裹，其中属性：is=’组件名’，当切换的时候可以用

<keep-alive></keep-alive>

标签包裹，这样做是为在在切换组件的时候可以将上一个组件缓存下来。

//html中
<keep-alive>
<p :is='comName'></p>
</keep-alive>
//data中
data(){
comName: 'com-a'//初始是com-a组件
}
//metods中
methods: {
changeCom () {
this.comName = 'com-b';//切换到组件com-b
}
}