vue2 插槽子组件向父组件传值使用方式

1.slot插槽作用域：带参数的插槽(可进行子组件向父组件传值)

父组件中：
    在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写

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

父组件app.vue

<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>

子组件son.vue

<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 {
   300px;
  height: 50px;
  background: lightpink;
}
</style>

app.vue(父组件接收值)
<template>
    <div id="app">
        <one-com>
            <template     scope="val">    //val接收到的值为一个对象，
                <li>{{val.msg}}</li>
            </template>
        </one-com>
    </div>
</template>

one.vue（子组件传值）
<template>
    <slot :msg= "message"></slot>//传值（自定义属性）

    export default(){

        data(){
            return{
                message:"我是要传递的内容"
            }
        }
    }

</template>