Vue过滤器、组件、插槽、props、监听器watch

过滤器

过滤器: filter, 把{{ }}中的值进行处理, 返回新的值

<template>
  <div>
    <!-- abs: 绝对值 -->
    <div>{{ 9 | abs }}</div>
    <div>{{ -9 | abs }}</div>
  </div>
</template>

在 script 脚本中, 和data methods平级的 filters 方法用于存放过滤器, 配合 {{ value | 过滤器 }} 语法

<script>
  export default {
    filters: {
      // {{ value | abs }}
      abs(value) {
        return value > 0 ? value : -value
      },
    },
  }
</script>

组件component

系统组件: div span h1 hr img ...

自定义组件: 利用系统组件组合出自己的组件, 可以复用

components: 此目录专门用于存放自定义组件

在 src 下面新建一个 component 文件夹

这样的一个结构, 在里面书写自定义组件

自定义组件的名称: 至少两个单词; 依赖大驼峰命名法区分单词, 大驼峰: XiAn  每个单词首字母大写因为: 系统组件/标签 都是1个单词; 自定义的组件为了区分, 所以要求至少两个单词

最后引入页面使用就可以了

<template>
  <div>
    <my-nav />
  </div>
</template>

<script>
import MyNav from './components/MyNav.vue' //引入

  export default {
    components: {MyNav, mynav: MyNav},
  }
</script>

 插槽

 插槽: 一个占位符; 使用时才会替换成实际的值

<template>
    <div class="my-slot">
        <div class="header">
            <!-- 默认插槽 -->
            <slot />
        </div>
        <div class="main">
            <div class="left">
                <!-- 命名插槽: 通过name属性 为 slot 组件添加名字 -->
                <slot name="suibian" />
            </div>
            <div class="right">
                <slot name="right" />
            </div>
        </div>
    </div>
</template>

props

props: 属性选项, 用于为自定义组件 声明 属性

<template>
    <div :class="`my-alert ${ type }`">
        <span>
            <slot />
        </span>
        <div>sui: {{ sui }}</div>
        <div>bian: {{ bian }}</div>
    </div>
</template>

<script>
    export default {
        props:['sui', 'bian', 'type'],
    }
</script>

监听器watch

监听器: 实时监听属性的变化

<template>
  <div>
    <button @click="num++">{{ num }}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
      }
    },
    // 监听器
    watch: {
        num(to, from){
        console.log('to:', to);
        console.log('from:', from); 
      },
    },
  }
</script>

<style lang="scss" scoped>

</style>

两个参数: 要监听的属性名: 变化时触发的函数

to为新值 from为旧值