Yuyy
Yuyy
十二.Vue组件

定义Vue组件

  • 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
  • 组件化和模块化的不同:
    • 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
    • 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;

组件定义的五种方式

  1. 使用 Vue.extend 配合 Vue.component 方法:
var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
    Vue.component('login', login);
  1. 直接使用 Vue.component 方法:
Vue.component('register', {
      template: '<h1>注册</h1>'
    });
  1. 将模板字符串,定义到script标签种:
<script id="tmpl" type="x-template">
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
    </script>

同时,需要使用 Vue.component 来定义组件:

Vue.component('account', {
      template: '#tmpl'
    });
  1. 作为对象
var tmp1={
  template:'<h1> helle Vue 组件</h1>
}
Vue.component('myCom5',tmp1)
  1. 私有模板的快速定义
    var tmp2={
      template:'<h1> helle Vue 组件6</h1>'
    }
    var vm = new Vue({
      el:"#app",
      data:{
      },
      methods:{
      },
      components:{
        tmp2
      }
    })
    <tmp2></tmp2>

注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之前,使用 – 链接;
如果不使用驼峰,则直接拿名称来使用即可;

vue组件上的data和methods

  1. 组件可以有自己的 data 数据
  2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
  3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
  4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!
Vue.component('mycom1', {
  template: '<h1>这是全局组件 --- {{msg}}</h1>',
  data: function () {
    return {
      msg: '这是组件的中data定义的数据'
    }
  }
})
  1. 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
  template: '#tmpl',
  data: function () {
    // return dataObj
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

组件切换

Vue提供了 component ,来展示对应名称的组件
component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

<component :is="comName"></component>

总结:当前学习了几个 Vue 提供的标签了
component, template, transition, transitionGroup

使用 this.$refs 来获取元素和组件

<com1 ref="mytemplate"></com1>
<h3 ref="myh3">获取的元素</h3>
console.log(this.$refs.myh3.innerText)
this.$refs.mytemplate.tmp1show()

注意:关于组件的属性绑定都应该在使用组件的地方编写,而不是在组件的模板里编写

发表评论

textsms
account_circle
email

Yuyy

十二.Vue组件
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组…
扫描二维码继续阅读
2020-02-10
友情链接
标签
文章归档
近期文章