vue框架中父组件与子组件之间的通信之props+$emit()方法

 
 父组件向子组件传递数据

父组件:

```
<template>
  <div id="app">
    <HomePageRight class="HomePageRight" /><!-- 主页右侧栏 -->
    <BottomRightCorner class="BottomRightCorner" :BottomRightCorner_flag="BottomRightCorner_flag"></BottomRightCorner>
    <!-- 右下角按钮区 -->

  </div>
</template>

<script>

import HomePageRight from './components/HomePageRight.vue'
import BottomRightCorner from './components/BottomRightCorner.vue'
export default {
  name: 'App',
  components: {

    HomePageRight,
    BottomRightCorner,

  },
  data() {
    return {
      BottomRightCorner_flag: true,//控制右下角回弹按钮的出现,当页面下拉一定程度时false变为true,按钮出现
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-color: #e4e6eb;
}

.HomePageRight {

  margin-left: 900px;
}

.BottomRightCorner {
  position: fixed;
  bottom: 100px;
  right: 100px;
}
</style>

```

其中BottomRightCorner标签里的:BottomRightCorner_flag='BottomRightCorner_flag'代表向子组件传递一个叫BottomRightCorner_flag的参数,参数内容为父组件data里的BottomRightCorner_flag.

子组件:

```
<template>
    <!-- 右下角反馈和回弹小图标 -->
    <div class="BottomRightCorner">
        <!-- 回弹按钮 -->
        <button class="go_top" v-if="BottomRightCorner_flag">
            <a href="#">
                <img src="../assets/BottomRightCorner/go_top.png">
            </a>
        </button>
        <!-- 反馈按钮 -->
        <button class="suggest">
            <a href="https://juejin.cn/pin/club/6824710202692993037?sort=newest">
                <img src="../assets/BottomRightCorner/suggest.png">
            </a>
        </button>
    </div>
</template>

<script>
export default {
    name: "BottomRightCorner",
    props: {
        BottomRightCorner_flag: {
            type: Boolean,  //类型判断
            default: false,   //默认值
        }
    },


}


</script>

<style>
.BottomRightCorner {

    display: flex;
    flex-flow: column;

}

.BottomRightCorner .go_top {
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0px;
    overflow: hidden;
}

.BottomRightCorner .suggest {
    margin-top: 10px;
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0px;
    overflow: hidden;
}

.BottomRightCorner img {
    width: 15px;
    height: 15px;

}
</style>
```

其中

```
props: { BottomRightCorner_flag: { type: Boolean, //类型判断 
default: false, //默认值 } },
```

代表从父组件接受一个数据,叫做BottomRightCorner_flag,数据类型预设为 Boolean,没接收到该数据时将该数据初始化为false.<br>
还可以简写为:

```
    props: ['BottomRightCorner_flag'],
```

 应用场景

该样例可用于网页右下角回弹按钮在将网页下拉到一定程度时才显现,具体实现可用在下拉到一定程度时js控制父组件data的中的BottomRightCorner_flag来控制传给子组件的数据,再来实现回弹按钮的隐藏和显现.

 子组件向父组件传递参数

子组件:

```
<template>
  <div>
    <h1>孩子</h1>
    
    <button @click="handleClick"> 按钮</button>
  </div>
</template>
<script>
export default {

  methods: {
    handleClick () {
      this.$emit('changeMessage', 'Bye')
    }
  }
}
</script>
```

子组件通过 handleClick () {
      this.$emit('changeMessage', 'Bye')
    }事件来向父组件传参.其中changeMessage为名称,Bye为传递的信息.
    <br>
父组件:

```
<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <child :message="message" @changeMessage="message =$event"> </child>
  </div>
</template>
 
<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeMeaasge (data) {
      console.log(data);
    }
  }
}
</script>
```

其中父组件通过<child :message="message" @changeMessage="message =$event"> </child>里的

```
@changeMessage="message =$event"

```

接收参数.