vue 父子组件传值父向子组件传值子向父组件传值：代码如下：

171 阅读 0 评论 113 点赞

我是靠谱客的博主顺利小笼包，这篇文章主要介绍vue 父子组件传值父向子组件传值子向父组件传值：代码如下：，现在分享给大家，希望可以做个参考。

父向子组件传值

子组件的props写成驼峰命名时的写法稍有不同

子向父组件传值：代码如下：

<body>

<!--父组件模板-->
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 发射事件: 自定义事件 注意这里边的父组件的item-click不嫩写成驼峰的形式，但是在脚手架中是可以写成itemClick的形式的
        this.$emit('item-click', item)
      }
    }
  }

  // 2.父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
</script>

</body>

效果：

可以看出来点击后就有效果

通过watch监听属性实现双向绑定：最终结果是对v-model的实现方式的深度练习

<body>
<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
</div>

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    methods: {
      num1change(value) {
        this.num1 = parseFloat(value)
      },
      num2change(value) {
        this.num2 = parseFloat(value)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number,
          name: ''
        },
        data() {
          return {
            dnumber1: this.number1, // v-model改变不了this.number1的值
            dnumber2: this.number2
          }
        },
        watch: {
          dnumber1(newValue) {
            // 这个值的改变也是让watch下的dnumber2被监听到
            this.dnumber2 = newValue * 100;
            // 这个的改变是让父组件的this.num1的值改变也就是让this.number1的值改变
            this.$emit('num1change', newValue);
          },
          dnumber2(newValue) {
            // 有一点就是为啥不会陷入死循环
            this.number1 = newValue / 100;
            this.$emit('num2change', newValue);
          }
        }
      }
    }
  })
</script>
</body>