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
        }],
      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
 }
}