vue_父子組件之間的數據傳遞

本文轉載自查看原文 2020-03-05 15:08 640 vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>父向子組件傳遞數據</h3>
    <!-- 加了冒號“”內表示一個表達式 -->
    <!-- 1.父組件傳遞name和count兩個數據 -->
    <!-- 4.父組件通過自定義事件監聽子組件傳遞的數據 -->
    <counter :name="'one'" :count="0" @change="handleIncrement"></counter>
    <counter :name="'two'" :count="0" @change="handleIncrement"></counter>
    <h4>子向父組件傳遞數據</h4>
    <div>父組件one+two=>{{total}}</div>
  </div>
</body>
<script type="text/javascript">
  // 局部創建組件
  let counter = {
    // 2.子組件用props接收
    props: ['name', 'count'],
    data () {
      return {
        selfName: this.name,
        selfCount: this.count
      }
    },
    template: '<div @click="handleClick">{{selfName}}---{{selfCount}}</div>',
    methods: {
      handleClick () {
        // vue單向數據流，不允許直接改變父組件穿過來的值,
        // this.count++ 報錯
        // 需要先將數據保存到自己的組件里
        this.selfCount++
        // 3.子組件自定義事件向父組件傳遞數據
        // 第二個參數可以為對象，數組，字符串
        this.$emit("change", 1)
      }
    }
  }
  let vm = new Vue({
    el: '#app',
    data: {
      total: 0,
    },
    methods: {
      handleIncrement (value) {
        this.total += value
      }
    },
　　//注冊子組件
    components: {
      counter
    }
  })
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue 編程之路（一）——父子組件之間的數據傳遞 vue中的數據傳遞以及事件傳遞（父子組件之間的數據互傳） Vue 組件之間的數據傳遞 vue 組件之間數據傳遞（七）關於vue.js父子組件數據傳遞 vue 父子組件與全局數據傳遞共享 vue2.0的父子組件數據傳遞 Vue基礎知識之組件及組件之間的數據傳遞（五）實現非父子之間通信，兄弟組件之間的數據傳遞--eventBus vuejs父子組件的數據傳遞