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父子组件的数据传递