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

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 {
  width: 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>