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

時間 2020-05-28

標籤 vue 入門學習組件之間通訊简体版

原文原文鏈接

父組件傳遞數據給子組件

父組件數據能夠經過props屬性傳遞給子組件html

父組件：vue

<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 屬性綁定動態的數據，將數據傳遞給子組件數組

子組件(請忽略插槽 )：bash

<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#adapp

子組件與父組件通訊

那麼，若是子組件想要改變數據呢？這在vue中是不容許的，由於vue只容許單向數據傳遞，這時候咱們能夠經過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的.ide

子組件

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