父組件傳遞數據給子組件

父組件數據可以通過props屬性傳遞給子組件

父組件：

<template>
  <div id="app" v-cloak>
    <my-component :msg=‘arr‘></my-component>
  </div>
</template>

<script>
import MyComponent from ‘./components/MyComponent.vue‘
export default {
  name: ‘App‘,
  data: function () {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  },
  components: {
    MyComponent
  }
}
</script>
 

父組件通過給子組件的 msg 屬性綁定動態的數據，將數據傳遞給子組件

子組件(請忽略插槽 )：

<template>
  <div class="container">
    <header>
        <slot name="header">這是header部分</slot>
    </header>
    <main>
        <slot :text =‘text‘>有分發的內容就不渲染，沒有就渲染</slot>
    </main>
    <footer>
        <slot name="footer">這是子組件中slot中的footer部分{{ msg }}</slot>
    </footer>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      text: [‘果汁‘, ‘雪碧‘, ‘牛奶‘, ‘咖啡‘, ‘茶‘]
    }
  },
  props: [‘msg‘],
  mounted () {
    // console.log(this.msg)
    // console.log(this.$props.msg)
  }
}
</script>
 

子組件可以通過props接收數據

props: [‘msg‘]

也可以指定類型

props: {
    msg: Array   // 如果傳入的類型不對，會警告
}

還可以指定默認值

props: {
    msg: {
        type: Number,
        default: 100   //可以指定默認的值       當父組件中未定義msg時顯示 100
    }
}

如果指定的類型是對象或數組默認值必須從一個工廠函數獲取

      default: function () {
        return { arr: [1,2,3] }
      }

驗證及其他屬性請查看官方文檔說明：

https://cn.vuejs.org/v2/guide/components-props.html#ad

子組件與父組件通信

那麽，如果子組件想要改變數據呢？這在vue中是不允許的，因為vue只允許單向數據傳遞，這時候我們可以通過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的.

子組件

<template>
  <div class="container" @click="up(arr)">
    <header>
        <slot name="header">點我點我~~~</slot>
    </header>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      arr: [{
        id: 1,
        name: ‘rose‘,
        age: 18,
        gender: ‘女‘
      }, {
        id: 2,
        name: ‘skyler‘,
        age: 18,
        gender: ‘女‘
      }, {
        id: 3,
        name: ‘jack‘,
        age: 18,
        gender: ‘男‘
      }]
    }
  },
  props: {
    msg: {
      type: Number,
      default: 176
    }
  },
  methods: {
    up (arr) {
      this.$emit(‘upup‘, arr)
    }
  }
}
</script>

子組件通過click事件觸發 upup 事件

父組件

<template>
  <div id="app" v-cloak>
    <my-component @upup="change"></my-component>
    <ul v-for="item in info" :key="item.id">
      <li>{{ item.name }}</li>
      <li>{{ item.age }}</li>
      <li>{{ item.gender }}</li>
    </ul>
  </div>
</template>

<script>
import MyComponent from ‘./components/MyComponent.vue‘
export default {
  name: ‘App‘,
  data: function () {
    return {
      info: ‘‘
    }
  },
  components: {
    MyComponent
  },
  methods: {
    change (arg) {
      this.info = arg
      console.log(this.info)
    }
  }
}
</script>

非父子組件通信

如果兩個組件不是父子組件那麽如何通信呢？這時可以通過eventBus來實現通信.

所謂eventBus就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件.

公共的事件中心

非父子組件的通信查閱

參考： http://www.chairis.cn/blog/article/24

vue入門學習—組件之間的通信