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 @   ascertain  阅读(52)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue: built-in animation class
·  Vue: 兄弟组件利用自定义Bus传参
·  Vue的v-bind="$attrs"如何使用
·  Vue中父组件读取或操作子组件数据的方法
·  Vue 的这些基本语法，小白必备！！
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae