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>