vue中子组件与父组件数据之间的相互调用

最近练手了一个项目，是这样的一个页面我拆分成了父组件（test.vue）和子组件（use_select.vue）

一、父组件怎么引用子组件:

首先在父组件的js内用import引入子组件（后缀名省略了）：

import UserSelectDiv from "./user_select";

然后再data下面同级的部分写一个components对象：

components: {
    UserSelectDiv: UserSelectDiv
  }

也可以直接省略冒号和后边的 UserSelectDiv，

最后在页面要显示的部分以标签的形式写入：

 <UserSelectDiv></UserSelectDiv>

二：父组件怎么给子组件传值：

父组件给子组件传值用到了v-bind属性，将所有的数据绑定到子组件中：

 <UserSelectDiv :indexs="indexs"></UserSelectDiv>

上面的第二个indexs 是父组件data里面有的数据；

在子组件中怎么接收这个值呢？

子组件使用props接收这个值，书写方式为在data的同级上面写一个props数组：

props: ["indexs"],

 这样在子组件的template里面可以直接引入indexs

三：子组件怎么给父组件传值：

按照我的理解，既然是子组件给父组件传值，那么必然是子组件的数据发生了变化

子组件使用$emit给父组件传值，

比如：

 this.$emit("windowFlagclick", 'false');

上面的意思是子组件给父组件穿的值是false，以windowFlagclick为媒介；

那么，父组件怎么接收这个false呢？

上面的父组件中引入子组件的标签就需要变更一下，加上v-on事件然后这个事件为windowFlagclick：

 <UserSelectDiv :indexs="indexs"  @windowFlagclick="windowshow"></UserSelectDiv>

然后在父组件的methods函数中写入windowshow函数：

windowshow(data) {
      this.currentwindows = data;
    }

上面就是让父组件中的currentwindows 等于false了。

介绍完毕。