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