vue---slot插槽实现 子组件向父组件传值

父组件中：
    在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写
 
子组件中：
在组件内部用slot进行传值，如果给slot加一个自定义属性，那么在组件标签的template的scope上面就可以进行接收到，接收到的为一个对象
 

<template>
  <div id="app">
    <son-com>
      <!-- 必须用template标签包裹，val为自定义的属性值，接收到的是一个对象 -->
      <template scope="val">
        <!--msg为子组件的自定义属性  -->
        <div>{{val.msg}}</div>

        <!--将son-com组件当标签使用，必须都写在template中，否则，不会显示 -->
        <div class="con">
          这是我用slot插槽显示的值
        </div>

      </template>

    </son-com>
  </div>
</template>

<script>
import son from "../components/son";
export default {
  components: {
    "son-com": son
  },
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

<template>
  <div>
    <!-- 自定义属性进行传值 -->
    <slot :msg="message"></slot>
    <div id="son">{{message2}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "我是son向app.vue传递的值",
      message2: "哈哈哈哈哈哈哈啊哈"
    }
  }
}
</script>

<style scoped>
#son {
  width: 300px;
  height: 50px;
  background: lightpink;
}
</style>