十二.Vue组件
本文最后更新于 1081 天前,其中的信息可能已经有所发展或是发生改变。

定义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()

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

作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇