vue父子传值

vue事件处理器

点击事件修饰符
@click.stop 阻止冒泡
@click.stop.prevent 阻止默认事件 （a标签点击功能失灵）
@click.stop.self 给绑定对象绑定事件，对子元素没有效果
@click.stop.once 只生效一次

@keyup.enter/tab/delete(捕获“删除”和“退格”键)/space/down

父组件如何传值给子组件？

vue父组件通过v-bind:num来传值给子组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello v-bind:num="num"></hello>
    <p >父组件：{{num}}</p>
  </div>
</template>

<script>
import hello from "./components/hello";

export default {
  data(){
    return {
      num: 11
    }
  },
  components:{
    hello
  }
}
</script>

子组件通过props: [‘num’],来接收值

<template>
  <div class="hello">
    <button @click="jiajia">+</button>
    <button @click="jianjian">-</button>
    <div>{{num}}</div>
  </div>
</template>

<script>
export default {
  props: ['num'],
  data () {
    return {
      num: 0;
    }
  },
  methods:{
    jiajia(){
      this.num++;
    },
    jianjian(){
      this.num--;
    }
  }
}
</script>

子组件如何传值给父组件？

本不推荐子组件传值给父组件，因为提倡的是数据单向流通
想要实现可以使用 $emit。

先在父组件引入子组件的上面自定义一个事件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello v-bind:num="num" v-on:jia="injia" v-on:jian="dejian"></hello>
    <p >父组件：{{num}}</p>
  </div>
</template>

<script>
import hello from "./components/hello";

export default {
  data(){
    return {
      num: 11
    }
  },
  components:{
    hello
  },
  methods:{
    injia(){
      this.num++;
    },
    dejian(){
      this.num--;
    }
  }
}
</script>

再在子组件里面调用父组件定义的事件名来触发父组件的方法来更改值（注意是事件名不是方法名）

<template>
  <div class="hello">
    <button @click="jiajia">+</button>
    <button @click="jianjian">-</button>
    <div>{{num}}</div>
  </div>
</template>

<script>
export default {
  props: ['num'],
  data () {
    return {
//      num: 0
    }
  },
  methods:{
    jiajia(){
      this.$emit('jia');
    },
    jianjian(){
      this.$emit('jian');
    }
  }
}
</script>

其实子组件传值给父组件的原理还是父组件在更改那个值的，只是方法交给了子组件来调用才产生效果