Vue 2.x 高级用法

Vue 进阶用法

1. 特点：模板化

1，插槽 slot

1. 默认插槽、匿名插槽

• 数组外维护 参数、其他的展示、数据结构等。在组件里选择位置。

app.vue

<template>
 <Hello>
 // 这里传值
   <p>{{msg}} </p> 
 </Hello>
</template>
<script>
import Hello from "./component/Hello.vue"
export default {
 ...
 components: {
   Hello
 },
 data() {
   return {
     msg: 1123,
   } 
 }
}
</srcipt>

-------------
Hello.vue

<template>
  <div>
  // 用 slot 决定把数据放哪
    <slot></slot> 
  </div>
</template>
<script>

export default {
  name: "Hello"
}
</srcipt>

2. 具名插槽

• 组件外：v-slot表示插槽名称，组件里：使用name映射对应插槽

app.vue

<template>
 <Hello>
 // 这里传值
  <template v-slot:header>{{header}}</template>
  <template v-slot:body>{{body}}</template>
 </Hello>
</template>
<script>
import Hello from "./component/Hello.vue"
export default {
 ...
 components: {
   Hello
 },
 data() {
   return {
     header: "slot header",
     body: "slot body"
   } 
 }
}
</srcipt>

-------------
Hello.vue

<template>
  <div>
  // 用 slot 决定把数据放哪
    <slot name="header"></slot> 
     <slot name="body"></slot>
  </div>
</template>
<script>

export default {
  name: "Hello"
}
</srcipt>

3. 作用域插槽

• slot-scope(2.6前)
• v-slot(2.6后) 组件外声明数据结构和内容，组件内接受传参，做展示用

app.vue

<template>

 <Hello>
 // 老版
  <template slot="content" slot-scope="slotProps">
    <p>{{ slotProps.slotProps }}</p>
  </template>
  // 新版
  <template  v-slot:slotProps="slotProps">
   {{ slotProps }}
  </template>
 </Hello>
 
</template>
<script>
import Hello from "./component/Hello.vue"
export default {
 ...
 components: {
   Hello
 },
 data() {
   return {
     header: "slot header",
   } 
 }
}
</srcipt>

-------------
Hello.vue

<template>
  <div>
  // 
    <slot name="content" :slotProps="slotProps"></slot> 
  </div>
</template>
<script>

export default {
  name: "Hello",
  data() {
    return {
      slotProps: "xianzao scope slot"
    }
  }
}
</srcipt>

数据的加工处理

1. watch computed：整个用法相对复杂(eg：要定义怎么实现或者怎么声明的)

• 函数： 处理内容更聚合，缺点：无法响应上下文。

(eg：methods: { add(params) { return 1+ params } })不能对数据进行响应

• v-html
• filter

<template>
// v-html
  <h2 v-html="money > 99 ? 99 : money"> </h2>
// filter
  <h2> {{ money | moneyFilter }} </h2>
</template>

<scirpt>
  export default {
   data() {
     return {
       money: 100
     }
   },
   methods:{
   // filter  也可以用这个，法1
   moneyFilter(money) {
       return money > 99 ? 99 : money;
     }
   },
   // filter 法2
   filters:{
     moneyFilter(money) {
       return money > 99 ? 99 : money;
     }
   }
  }
</script>

JSX

1. 模板化 {{}}
2. JSX TSX compire

<script>
 export default {
   data() {
     return {
       options: [
         {
           value:1,
           text:1
         },
          {
           value:2,
           text:2
         },
       ]
     }
   },
   methods: {
     handleClick() {}
   },
   // JSX 一般会用到这个
   render(h) {
     return  <ul> 
      { this.options.map((item, index) => {
        return <li>{{item.text}}</li>;
         <Content onClick={this.handleClick} item={item} key={index} />
      }) }
     </ul>
   }
 }
<scipt>

组件化

1. 全局引入组件

  Vue.component('component', {
    template:'<h1>xxx</h1>'
  })

2. 函数式组件 平常用的，前面讲插槽的时候用到的就是

// Hello.vue

<template>
<div>
// 
  <slot name="content" :slotProps="slotProps"></slot> 
</div>
</template>
<script>

export default {
name: "Hello",
data() {
  return {
    slotProps: "xianzao scope slot"
  }
}
}
</srcipt>

mixin

1. 支持递归合并
2. data 有冲突时，优先选择组件中的data
3. 涉及生命周期时，不会覆盖回调函数，但是 minxin 优先级高于 component

// mixin.js

// 组件.vue

extends

• 用法与 mixin类似，区别在于 mixin 接受数组，extends 接受一个
• 合并起来时，优先级： 组件 > mixin > extends
• 生命周期回调， extend > mixin

整体扩展的 extends

Vue.use 插件

• 注册外部插件，用来丰富整体的Vue的实例内容
• Vue.use(), 默认调用 install

// 插件.js
export default {
  install: (Vue, options) => {
    Vue.globalMethod = function () {};
    Vue.directives("xianzao-directive", {
      bind(el, binding, vnode, oldVNode)
    })
    // 作用和 globalMethod 一样
    Vue.prototype.$myMethod = function() {}
    
    Vue.mixin({
      created: function() {
        console.log(options.name + "created")
      }
    })
  }
}

// 使用