vant-UI组件初使用：浅谈 - 解说篇_vand ui

vant-UI（有赞UI）组件使用 “深入浅出”。全局组件注册VS局部注册：有何区同？

默认开发者已经能够独立创建和搭建vue-cli项目

以vue默认生成的项目目录和文件为例：（目录截图省略）

一、组件的全局注册 && 使用/调用

代码示例：

// main.js

import { 
  Button, 
  Cell,
  NavBar,
  Toast
} from 'vant'      //  注意2：组件的全局注册
import 'vant/lib/index.css'

1
2
3
4
5
6
7
8
9
10

// HelloWorld.vue

<template>
  <div class="hello">
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     
    }
  },
  methods: {
    onClickLeft() {
      this.$toast('返回');     // 注意1：这里的示例代码是 this.$toast ，以后每个.vue调用都是this.$方法  （当前对象的方式）
    },
    onClickRight() {
      this.$toast('按钮');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

二、组件的局部注册 && 使用/调用

代码示例：

// main.js

import 'vant/lib/index.css'

1
2
3
4

// HelloWorld.vue

<template>
  <div class="hello">
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

  </div>
</template>

<script>
// 注意3：我们将main.js中的组件的全局注册，在当前.vue文件内局部注册，并再必须要注册引入vue组件
import Vue from 'vue'
import { 
  Button, 
  Cell,
  NavBar,
  Toast
} from 'vant'   

// 注意3：结束

export default {
  name: 'HelloWorld',
  data () {
    return {
     
    }
  },
  methods: {
    onClickLeft() {
      Toast('返回');    //  注意4. 这样就可以使用官方文档直接给定的 Toast() 方法了。
    },
    onClickRight() {
      Toast('按钮');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

具体的使用，还是要根据个人偏好、项目实际、结合官方文档+实例示例 => 参考

以上就是关于“ vant-UI组件使用：浅谈 - 解说篇 ” 的全部内容。