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

今天药忘吃喽~ 2021-12-23 10:15 899阅读 0赞

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

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

父组件app.vue

<template>
      <div id="app">
        <son-com>
          
          <template scope="val">
            
            <div>{
           {val.msg}}</div>
    
            
            <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>**

<one-com>

<template **scope="val"**> //val接收到的值为一个对象，

</template>

</one-com>

</div>

**</template>**

**one.vue（子组件传值）**

<slot :**msg**= "message"></slot>//传值（自定义属性）

export default()\{

data()\{