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>

 

posted @ 2020-03-05 15:08  前端之旅  阅读(789)  评论(0)    收藏  举报