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>
  • 相关阅读:
    值传递和引用传递(不是引用类型的传递)的区别
    字符串一旦定义,就表示开辟好了指定的空间,其内容就不可改变
    String类的直接赋值和构造方法赋值的区别
    字符串常量是String类的匿名对象
    Integer和int的区别(转)
    final的好处
    数组引用传递
    构造代码块
    ==和equals()的不同点
    Redis数据类型底层实现
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/14415181.html
Copyright © 2011-2022 走看看