zoukankan      html  css  js  c++  java
  • Vue Slot的使用及传值 && 过滤器filters的使用

    slot其实就是一个模板文件,可以通过这个文件进行数据的展示以及向父组件的传值等

    首先我们先定义一个插槽组件:slotTest.vue文件

    <template>
      <div>
        <p @click="cClick">我是插槽,</p>
        <!-- 默认插槽 -->
        <slot :name1="name1"></slot>
        <!-- 具名插槽 -->
        <slot name="header" :name2="name2" >header</slot>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          name1: "默认插槽传递的值",
          name2: "具名插槽传递的值",
        };
      },
      methods: {
        cClick() {
          alert("子组件绑定事件")
        }
      },
    };
    </script>
    
    <style scoped>
    </style>

    在父组件中 pSlot.vue中引入及使用

    <template>
      <div>
        <div>
          插槽父组件
          <SlotChilder>如果不引入slot标签,我是不会进行显示的
            <!-- 接受默认插槽传递的值  v-slot="自己命名的属性" -->
            <template v-slot="defaultSlot">
              <div @click="pClick(defaultSlot)">
                {{defaultSlot.name1}}
              </div>
            </template>
            <!-- 接受具名插槽传递的值  v-slot:插槽name名称="自己命名的属性" -->
            <template v-slot:header="headerSlot">
              <div>
                {{headerSlot.name2}}
              </div>
            </template>
          </SlotChilder>
        </div>
        <div>
          <p>过滤器的使用</p>
          <p>{{age | ageSize}}</p>
        </div>
      </div>
    </template>
    
    <script>
    import SlotChilder from "../components/slotTest.vue";
    export default {
      components: {
        SlotChilder,
      },
      filters:{
        ageSize(value){
          if(value>20){
            return "老年人"
          }else{
            return "小屁孩儿"
          }
        }
      },
      data() {
        return {
          name: 1,
          age:18
        };
      },
      methods: {
        pClick(defaultSlot) {
          console.log(defaultSlot)
        }
      },
    };
    </script>
    
    <style scoped>
    </style>
  • 相关阅读:
    Heartbeat
    HA集群基本概念详解
    crmsh语法
    corosync.conf
    安装cloudbase-init和qga批处理
    Oz代码梳理
    [转]LVS安装使用详解
    [转]LVS+Keepalived负载均衡配置
    Django REST framework之序列化组件以及源码分析+全局、局部Hook
    Django REST framework之解析器实例以及源码流程分析
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/14415181.html
Copyright © 2011-2022 走看看