Vue: parent component get child component data using slot & v-bind 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
</head>

<body>
  <div id="vail">
    <valor></valor>
    <hr>
    <valor>
      <template v-slot:default="namess">
        <span>{{namess.data.join('~')}}</span>
        <span>{{namess}}</span>
        <hr>
        <ul>
          <li v-for="name in namess.data.concat(namesa)">{{name}}</li>
        </ul>
      </template>
    </valor>
  </div>
  <template id="tt">
    <main style="background-color: peru;width:200px;height:200px;margin: 20px;">
      <slot v-bind:data="names" :datum="55">
        <ul>
          <li v-for="name in names">{{name}}</li>
        </ul>
      </slot>
    </main>
  </template>
  <script>
    let valor = {
      data () {
        return { names: ['a', 'b', 'c'] }
      },
      template: '#tt'
    }
    let vail = Vue.createApp({
      data () {
        return { namesa: ['z', 'x'] }
      },
      components: {
        'valor': valor
      }
    }).mount('#vail')
  </script>
</body>

</html>

 

 v-slot作为连接桥梁, 子组件通过 v-bind 绑定了 data & datum, 组成了一个对象, 父组件通过v-slot:default="namess" namess变量接收了组成的object

 

一下为具名v-slot

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="bait bark">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Vehemence</title>
  <script src="dist/vue.global.js"></script>
</head>

<body>
  <div id="vail">
    <valor></valor>
    <hr>
    <valor>
      <template v-slot:default="namess">
        <span>{{namess.data.join('~')}}</span>
        <span>{{namess}}</span>
        <hr>
        <ul>
          <li v-for="name in namess.data.concat(namesa)">{{name}}</li>
        </ul>
      </template>
    </valor>
    <hr>
    <valor>
      <template v-slot:surrogate="surrogate">
        <ul>
          <li v-for="name in surrogate.data.concat(namesa)">{{name}} {{i}}</li>
        </ul>
      </template>
    </valor>
  </div>
  <template id="tt">
    <main style="background-color: peru;width:200px;height:200px;margin: 20px;">
      <slot name="surrogate" v-bind:data="names" :datum="55">
        <ul>
          <li v-for="name in names">{{name}}</li>
        </ul>
      </slot>
    </main>
  </template>
  <script>
    let valor = {
      data () {
        return { names: ['a', 'b', 'c'] }
      },
      template: '#tt'
    }
    let vail = Vue.createApp({
      data () {
        return { namesa: ['z', 'x'] }
      },
      components: {
        'valor': valor
      }
    }).mount('#vail')
  </script>
</body>

</html>

 

posted @ 2022-03-13 22:36  ascertain  阅读(49)  评论(0)  编辑  收藏  举报