Vue2.x父子组件相互通信

一、前言

Vue 2.x 使用期间，我们会创建众多组件，这里我们将讨论一下各个组件直接的相互通讯问题如何解决。

二、Vue 2.x组件相互通讯原理

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

三、子组件

这里的子组件是模拟的一个搜索组件，包含返回、搜索等事件。
只用关注组件的值传递即可。

$title(child.vue)
<template>
  <!--搜索条-->
  <div class="search-back-section searchHead flex-between animated" :class="activeClass">
    <mu-button class="back" flat color="#444444" @click="back"><i class="fa fa-angle-left" aria-hidden="true"></i></mu-button>
    <mu-text-field
      :value="searchKeyword"
       v-model="text"
      :placeholder="'请输入：'+placeholder"
      :error-text="error"
    ></mu-text-field>
    <mu-button small class="btn" flat color="#444444" @click="search">搜索</mu-button>
  </div>
</template>

<script>
  import verify from "../assets/js/verify";

  export default {
    name: "com-search-back-section",
    props: [
      "back",         //"返回按钮"
      "searchKeyword",  //搜索关键字
      "placeholder",  //输入框提示
      "error",        //错误提示
      "activeClass",        //绑定CSS样式
    ],
    data() {
      return {
        text: "",
      }
    },
    watch:{
      searchKeyword(val){
        this.text=val;
      }
    },
    created() {
      this.text = this.searchKeyword;
    },
    methods: {
      search() {
        let msg = "";
        if (verify.isEmpty(this.text)) {
          msg = this.text;
        } else {
          msg = false;
        }
        this.$emit("search", msg);
      }
    },
  }
</script>

<style scoped>
  //样式代码与本文主题关系不大，省略
</style>

划重点

props: [
      "back",         //"返回按钮"
      "searchKeyword",  //搜索关键字----重点
      "placeholder",  //输入框提示
      "error",        //错误提示
      "activeClass",        //绑定CSS样式
    ] 

watch:{
      searchKeyword(val){
        this.text=val; //---重点
      }
    }

通过watch监视props中的属性值以及data中属性与数据的双向绑定，实现了外部数据的双向绑定。

注意：父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致

search() {
        let msg = "";
        if (verify.isEmpty(this.text)) {
          msg = this.text;
        } else {
          msg = false;
        }
        this.$emit("search", msg); //---重点
      }

通过$emit向外面抛出一个回调函数传递当前组件的值数据。

四、父组件

$title(patent.vue)
<template>
其他省略---
<!--搜索框-->
<search-back-section
  :active-class="isFixedState?'isFixed fadeInDown':''"
  :back="closeFullscreenDialog"
  :searchKeyword="searchKeyword"  //-----重点
  :placeholder="'关键字'"
  @search="searchBtn"
  :error="errorText"
></search-back-section>
其他省略---
</template>

<script>
let _self=null;
export default {
  name: "door-home",
  data() {
    return {
      errorText: "",     //错误信息
      searchKeyword: "",  //关键字 
	  isFixedState:false  //用于判断css样式选择，与主题无关
  },

  created() {
    _self=this;
	this.searchKeyword='默认的值'; //---重点   会看到初始化的子组件中输入框默认值为‘默认的值’（实现了父向子传递数据）

  },

  methods: {
    /*
    * @"搜索"按钮
    * */
    searchBtn(msg) {------重点   通过子向外抛出的回调函数，子组件向父组件传递子组件中输入的内容值（实现了子向父传递数据）
      if (msg) {
        this.searchKeyword = msg;
        this.errorText = "";
      } else {
        this.errorText = "请输入关键字.";
        return false;
      }
    }
	closeFullscreenDialog(){
	
		//关闭搜索操作，与主题无关代码省略
	}
    },
};

</script>

注意：父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致,传值是通过props传递所以必须一致。
例子中的 :searchKeyword="searchKeyword"
前面的searchKeyword是子组件的props定义的，后面这个是当前父组件定义的，后方这个searchKeyword可以随意其他名称

vue 组件相互通讯

https://www.leftso.com/article/503.html