Vue框架2.0基础知识(7）mixin混入语法过滤器 $attrs 和$ listeners

本文链接：https://blog.csdn.net/weixin_46256704/article/details/123060805

mixin 混入语法 （抽离公共代码）
混入语法中的生命周期执行会加入到实例调用的实例当中，data和methods会遵从实例中的data和methods。

我们直接来看实例：

   var myMxiin={
            data:{
                msg:'1000'
            },
            created(){
                console.log('我是混入语法中的生命周期')
                this.init()
            },
            methods: {
                init(){
                    console.log(6666)
                }
            },
        }

        const app=new Vue({
            el:'#app',
            data:{
                msg:'999'
            },
            // methods:{
            //     init(){
            //         console.log(2222)
            //     }
            // },
            created(){
                console.log('我是app实例中的生命周期')
               
            },
            mixins:[myMxiin]
        })

参数：

{Object} mixin

全局用法：

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。

注：不推荐在应用代码中使用。

  <div id="app"></div>
    <!-- 
        data 和methods 的数据以组件里面的为主
        在哪里要用，就在哪里混入
        mixins：[]
    -->
    <script src="./todomvc-app-template-master/node_modules/vue/dist/vue.js"></script>
    <script>
        // 混入代码 （抽离公共代码）
        var myMixin = {
            data: {
                msg: "10000"
            },
            created() {
                console.log(888)
                // this.init();
            },
            // data 和methods 那么以组件里面为主。
            methods: {
                init() {
                    console.log(6666)
                }
            }
        }
        const app = new Vue({
            el: '#app',
            // 哪里要用 就混入到哪里
            mixins: [myMixin],
            data: {
                msg: "999"
            },
            created() {
                this.init()
            },
            methods: {
                init() {
                    console.log(this.msg)
                }
            }
        })
    </script>

因为一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>

在创建 Vue 实例之前全局定义过滤器：

//全局过滤器

    Vue.filter("timeFormat", (val) => {
        let time = new Date(val)
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let day = time.getDate();
        return year + "年" + month + "月" + day + "号"
    })

// 局部过滤器：

  const app=new Vue({
        el:'#app',
        data:{
        time:'2022-02-16'
        },
        filters:{
            timeFormat(val){
                let time = new Date(val)
                    let year = time.getFullYear()
                    let month = time.getMonth() + 1
                    let day = time.getDate();
                    return year + "年" + month + "月" + day + "号"
            }
        }
    })

私有过滤器和全局过滤器

在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用

如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

代码详情:

<body> 
<div id="app">
    <p>message 的值是：{{ message | capi }}</p>
  </div>
 
  <div id="app2">
    <p>message 的值是：{{ message | capi }}</p>
  </div>
 
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 使用 Vue.filter() 定义全局过滤器
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + '~~~'
    })
 
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 过滤器函数，必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
        // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
        capi(val) {
          // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other
        }
      }
    })
 
    // ----------------------------------
 
    const vm2 = new Vue({
      el: '#app2',
      data: {
        message: 'heima'
      }
    })
  </script>
</body>

Vue的指令与过滤器之key的注意事项，这点值得注意的小细节

key的值只能是字符串或数字类型
key的值必须具有唯一性( 即: key 的值不能重复)
建议把数据项id属性的值作为key的值( 因为id属性的值具有唯一性)
使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
建议使用v-for指令时一定要指定key的值( 既提升性能、又防止列表状态紊乱,)

带你探秘$ attrs和$ listeners
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

演示如下：

<script>
        let m2 = {
            props: ["c"],
            template: "<div>m2 -- {{c}}</div>",
            created() {
                console.log("m2------", this.$listeners)
                this.$listeners.f1()
            }
        }

        let m1 = {
            props: ["b"],
            template: '<div>m --- {{b}} -- <m2 v-bind="$attrs" v-on="$listeners"></m2></div>',
            components: {
                m2,
            },
            created() {
                console.log("m1----",this.$props)
                console.log("m1----", this.$listeners)
            }
        }


        let son = {
            props: ["a"],
            template: "<div>son---  --- {{a}} ---<m1 v-bind='$attrs' v-on='$listeners'></m1></div>",
            components: {
                m1
            },
            mounted() {
                console.log(this.$props)
                console.log(this.$listeners)
            }
        }

        let father = {
            template: "<div>Father<son :a=a :b=b :c=c @f1='f1' @f2='f2' @f3='f3'></son></div>",
            components: {
                son
            },
            data() {
                return {
                    a: 1,
                    b: 2,
                    c:3
                }
            },
            methods: {
                f1() {
                    console.log("f1")
                },
                f2() {
                    console.log("f2")
                },
                f3() {
                    console.log("f3")
                }
            }
        }

        const app = new Vue({
            el: "#app",
            components: {
                father
            },
            data: {

            }
        })
    </script>

v-bind="attrs"这里会接收所有自定义的绑定属性，并传递到本层，可以拿到里面任意的数据，但是拿了之后传入下一级的时候后面的则拿不到上一层拿走的属性。

$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

代码如上，这里则不同每一层使用 v-on='$listeners'的标签都会接收到上一组件的所有方法，利用this.$listeners即可使用。并且不会影响后来的调用。