Vue中父组件与子组件之间的通信

prop 父组件向子组件传递数据, 单向绑定 $refs 父组件调用子组件里的属性和方法 $emit 子组件向父组件传递消息

新建项目

$ vue create demo
$ cd demo
$ npm run serve

1、父组件引用子组件

components/Child.vue

  子组件

App.vue

  
    父组件

    
    

  



// 1、导入子组件
import Child from "@/components/Child.vue";

export default {
  name: "app",

  // 2、注册组件
  components: {
    Child // 键名与变量名相同， 等价于 Child: Child
  }
};

2、父组件给子组件传值

components/Child.vue

    
        子组件
        {{message}}
    



export default {
    name: "child",

    // 子组件属性，用于接收父组件数据, props是单向绑定
    props:[
        "message"
    ]
}

App.vue

  
    父组件
    
    

    
    

    
    

  



import Child from "@/components/Child.vue";

export default {
  name: "app",

  data() {
    return {
      message: "hello child"
    };
  },
  
  components: {
    Child
  }
};

3、父组件操作子组件数据，方法

components/Child.vue

    
        子组件
        
        {{message}}
        
    



export default {
    name: "child",
    
    // 子组件属性
    data(){
        return {
            message: "",
        }
    },

    // 子组件方法
    methods:{
        setMessage(msg){
            this.message = msg;
        }
    }
}

App.vue

  
    父组件

    
    

    修改子组件数据

    调用子组件方法

  



import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    setChildMessage() {
      this.$refs.child.message = "设置子组件属性"
    },

    callChildMessage(){
      this.$refs.child.setMessage("调用子组件方法");
    }
  }
};

$refs 不是响应式的，只在组件渲染完成后才填充

4、子组件给父组件传值

components/Child.vue

  
    子组件

    
    子组件按钮

  



export default {
  name: "child",

  methods: {
    clickButton() {
      // 向父组件发送信号  vm.$emit(event, args)
      this.$emit("clickButton", "子组件的按钮被点击");
    }
  }
};

App.vue

  
    父组件

    
    

  



import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    // 接收处理子组件传递过来的数据
    childClickButton(message) {
      console.log(message);
    }
  }
};

参考：

1. vue之父子组件间通信实例讲解(props、$ref、$emit)
2. 【vue组件之间互相传值：父传子，子传父】