vue学习笔记六：在vue项目里面父子组件传值

最新推荐文章于 2024-01-10 19:58:44 发布

原创最新推荐文章于 2024-01-10 19:58:44 发布 · 778 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

44 篇文章

订阅专栏

本文介绍Vue中父组件向子组件传递数据及子组件触发父组件更新状态的方法。通过home.vue与myfooter.vue间的交互展示参数传递过程；并通过mychild组件触发home.vue中的increment和decrement方法来更新数据。

一、父给子传值：

home.vue(父)注册子组件myfooter，并定义params值，给子组件传值

myfooter.vue(子)接收父传的值，使用到props接收值。

控制台输出结果

这里写图片描述

二、子给父传值
home.vue父在注册子组件mychild时自定义两个事件(incre和decre),并在增加increment和decrement的方法，说道底就是，父方法创建方法让子组件调用改变

     <p>父：{{num}}</p>
    <my-child v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></my-child>

   export default {
        data(){
            return {
                //给父默认为10
                num:10
            }
        },
        components: {
            Counter
        },
        methods:{
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    }

mychild子组件使用$emit调用父组件(注意是事件名)

<!-- 子组件 -->
<template>
  <div>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <p>{{num}}</p>
  </div>
</template>

<script>
export default {
    name:"mychild",
    props:["num"],
    data () {
        return {
        };
    },
    components: {},
    methods:{
        increment(){
            this.$emit('incre');
        },
        decrement(){
            this.$emit('decre');
        }
    }

    }

</script>
<style scoped>
</style>

控制台输出的结果