vue组件通信（父子）

父-->子

父类的变量要传递给子类使用，需要三步：

1.在父类的data的return内定义变量并赋值

2.在父类的子组件上添加事件，事件值是定义的变量名

3.在子类中export default内与data同级定义props，以一维string类型数组的形式接收父类传递的参数名

此时子类中就可以直接使用传递过来的参数名在页面中完成渲染等操作

父类代码：

<template>
  <div class="App">
    <!--定义事件，传递参数，参数值为定义好的data中的内容-->>
    <SonView :lookWord="titleWOld"></SonView>
   father组件
  </div>
</template>

<script>
import SonView from './components/SonView';
export default {

  data() {
      return {
        titleWOld:'hello world'
      }
  },
  components: {
      SonView
  },
}
</script>

<style scoped>
.App{
  overflow: hidden;
   width: 300px;
   height: 160px;
   border: 2px solid rgb(218, 30, 52);
   color: #ee8c0b;
}
</style>

子类：

<template>
   <div class="sonView">
    son 组件
    <!-- 直接渲染数据 -->
    {{ lookWord }}
   </div>
</template>

<script>
export default {
    props:['lookWord']//以数组形式接收，可接收多个，记得加引号
}
</script>

<style scoped>
.sonView{
    margin: 20px;
    width: 100px;
    height: 60px;
    border: 2px solid #e8560d;
    background-color: #3f11c9;
    color: antiquewhite;
}
</style>

结果如图所示：

子-->父

以定义按钮改变父组件中的变量值为例：

1.子类中定义按钮，添加点击的监听事件，methods中定义对应的处理函数通过this.$emit发射对应事件名和事件值。

2.在父组件中监听子组件的事件名，在父类的methods中提供对应处理函数

3.处理函数的参数值就是this.$emit中提交的事件值，用this.   data中return内的变量值就可以完成更新

代码如下（和前面的有重合）

父组件：

 <template>
  <div class="App">
    <!--定义事件，传递参数，参数值为定义好的data中的内容-->
    <!--监听子类事件，用@，提供对应处理函数-->
    <SonView :lookWord="titleWOld" @changeWold="changeFn"></SonView>
   father组件
  </div>
</template>

<script>
import SonView from './components/SonView';
export default {

  data() {
      return {
        titleWOld:'hello world'
      }
  },
  components: {
      SonView
  },
  methods:{
    /* 更新变量值 */
    changeFn(world){
      this.titleWOld = world
    }
  }
}
</script>

<style scoped>
.App{
  overflow: hidden;
   width: 300px;
   height: 260px;
   border: 2px solid rgb(218, 30, 52);
   color: #ee8c0b;
}
</style>

子组件：

<template>
   <div class="sonView">
    son 组件
    <!-- 直接渲染数据 -->
    {{ lookWord }}
    <button @click="changeWold()">changeWold</button>
   </div>
</template>

<script>
export default {
   props:['lookWord'],//以数组形式接收，可接收多个
   data() {
       return {}
   },
   methods: {
       changeWold(){
        //发射事件名和事件值
        this.$emit('changeWold','hello vue')
       }
   },
}
</script>

<style scoped>
.sonView{
    margin: 20px;
    width: 100px;
    height: 180px;
    border: 2px solid #e8560d;
    background-color: #3f11c9;
    color: antiquewhite;
}
</style>