Vue.js+vue-element搭建属于自己的后台管理模板:更深入了解Vue.js(三)

时间:2019-10-05 20:48:33   收藏:0   阅读:600

前言

上一章我们介绍了关于Vue实例中一些基本用法,但是组件、自定义指令、Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少的知识点。

Vue实例属性和方法

在我们学习组件之前,更深入的了解下Vue实例,它除了data数据对象属性外,Vue实例还暴露了一些有用的实例属性和方法,它们都有前缀$,以便与用户定义的属性区分开来,详细适用方法可以查阅官方API文档。

实例属性:

实例方法 / 数据:

实例方法 / 事件:

实例方法 / 生命周期:

 

组件

组件是Vue.js中最强大的功能之一,核心目标是为了可重用性高,减少重复性开发。组件需要注册才可以使用,注册有全局注册和局部注册两种方式,全局注册的组件可以在任何Vue实例上都可以使用。Vue实例中使用compoents选项来注册局部组件,局部组件只能在当前实例中使用,组件中也可以使用compoents选项来注册子组件,使组件可以嵌套使用。

 

全局注册,代码示例如下:

<div id="app">
  <my-component></my-component>
</div>
<script>
Vue.component(my-component, {
  template: <div>这里是组件内容</div>
})

var app = new Vue({
  el: #app
})
</script>

渲染后的结果是:

<div id="app">
  <div>这里是组件内容</div>
</div>

 

局部注册,代码示例如下:

<div id="app">
  <my-component></my-component>
</div>
<script>
var app = new Vue({
  el: #app,
  components: {
    my-component: {template:<div>这里是组件内容</div>}
  }
})
</script>

组件中除了template选项外,还可以像Vue实例那样使用其他选项,比如data、methods、computed等,data选项必须是函数,必须return返回才有效。

代码实例如下:

<div id="app">
  <my-component></my-component>
</div>
<script>
Vue.component(my-component, {
  template: <div>这里是组件内容</div>,
  data: function(){
    return {
      message: 组件内容  //组件内部定义的数据
    }
  }
})

var app = new Vue({
  el: #app
})
</script>

prop传递数据:

Vue实例或父组件中调用子组件时,通常需要向子组件传递数据,这个过程需要通过prop来实现,组件中提供了props选项来接收参数,props的值分两种,一种是字符串数组,另一种是对象,使用对象方式实际项目中最为常见,代码示例如下:

<div id="app">
  <my-component message="来自父组件的数据"></my-component>
</div>
<script>
Vue.component(my-component, {
  props: [message],
  template: <div>{{ message }}</div>
})

var app = new Vue({
  el: #app
})
</script>

通常父组件中传递的数据并不是写死的,而是来自父级的动态数据,这时可以使用指令v-bind来动态绑定prop的值,当父组件的数据变化时也会传递给子组件,上面例子中props的值使用的是字符串数组方式,下面我们使用另一种对象方式接收,代码实例如下:

<div id="app">
  <input type="test" v-model="msg">
  <my-component :message="msg"></my-component>
</div>
<script>
Vue.component(my-component, {
  props: {
    message: String
  },
  template: <div>子组件中显示:{{ message }}</div>
})

var app = new Vue({
  el: #app,
  data: {
    msg: ‘‘
  }
})
</script>

技术分享图片

数据验证:
当props值为对象时,定义参数类型type,包括String、Number、Boolean、Object、Array、Function,参数也可以设置初始值default,定义是否必传参数required:true,还有自定义验证函数等,当prop验证失败时,在开发版本下会在控制台抛出一条警告。
代码实例如下:

<script>
  Vue.component(my-component, {
    props: {
      propA: Number,  //必须是数字类型
      propB: [String, Number],  //必须是字符串或数字类型
      propC: {  //布尔类型,如果未传入,默认值为true
        type: Boolean,
        default: true
      },
      propD: {  //数字类型,必传参数
        type: Number,
        required: true
      },
      propE: {  //如果是数组或对象类型,默认值必须是一个函数来返回
        type: Array,
        default: function () {
          return [];
        }
      },
      propF: {  //自定义一个验证函数
        validator: function () {
          return value > 10;
        }
      }
    }
  })
</script>

自定义事件:
上面我们知道了父组件向子组件传递数据时使用prop来完成,这里说明一下prop值属于引用类型,当改变prop值会直接影响父组件,重复使用组件时直接改变prop值时就失去了复用的目的。那么子组件中向父组件传递数据要怎么处理呢,这里我们就用到了自定义事件,自定义事件首先要在父组件中通过v-on监听一个事件,事件钩子函数在父组件实例中创建,在子组件中通过this.$emit()来触发这个自定义事件,$emit()方法的第一个参数是自定义事件的名称,后面参数为要传递的数据,后面参数可以为空或多个,代码实例如下:

<div id="app">
  <p>总数:{{ total }}</p>
  <my-component @inccount="handleInc"></my-component>
</div>
<script>
  Vue.component(my-component, {
    template: <div><button @click="handleIncrease">+1</button></div>,
    data: function(){
      return {
        counter: 0
      }
    },
    methods: {
      handleIncrease: function(){
        this.counter++;
        this.$emit(inccount, this.counter); //触发父组件中自定义事件
      }
    },
  })
  var app = new Vue({
    el: #app,
    data: {
      total: 0
    },
    methods: {
      handleInc: function (count){
        this.total = count;
      }
    }
  })
</script>

 技术分享图片

组件上使用v-model:
前面章节中我们讲过v-model是一个特殊的语法糖,实际它等同于input自定义事件,我们这里通过v-model来创建自定义的表单输入组件,进行数据双向绑定,代码实例如下:

<div id="app">
  <p>总数:{{ total }}</p>
  <my-component v-model="total"></my-component>
</div>
<script>
  Vue.component(my-component, {
    props: [value],
    template: <div><input :value="value" @input="updateValue"></div>,
    methods: {
      updateValue: function(){
        this.$emit(input, event.target.value);
      }
    },
  })
  var app = new Vue({
    el: #app,
    data: {
      total: 0
    }
  })
</script>

技术分享图片

非父子组件通信:
在实际业务中,除了父子组件通信外,还有很多非父子组件通信的场景,比如兄弟组件和跨多级组件,Vue.js中提供了一个方法,创建一个空的Vue实例作为中央事件总线(bus),也就是一个中介,初始化Vue实例时,监听这个中介事件来完成自己的业务逻辑。除了它Vue还提供了一个更好的解决方案 vuex状态管理插件。

 

插槽

 

 

目录导航

参考资料

Vue.js

原文:https://www.cnblogs.com/han1982/p/11612608.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!