组件

组件化和模块化

  • 模块化： 基于代码逻辑的角度来划分的
  • 组件化： 基于UI界面的角度来划分的

    全局组件

    定义组件的三种方式

    1.使用Vue.extend配合Vue.component
    1. # 第一种方式
    2. // 1. 创建一个全局组件
    3. var login = Vue.extend({
    4.   template: '<h1>登录</h1>'
    5. })
    6. // 2. 注册组件
    7. // Vue.component('组件的名称', 模板对象)
    8. Vue.component('login', login)

  1. 使用 Vue.component

    1. Vue.component('resgister',{
    2.  template: '<h1>注册</h1>'
    3. })

  2. 将模板字符串定义到 script 标签中

    1. <script id="tmpl" type="x-template">
    2.  <div> <a>登录</a> | <a>注册</a> </div>
    3. </script>

    同时使用 Vue.component 来定义组件

    1. Vue.component('account', {
    2.  template: '#tmpl'
    3. })

    组件名大小写

  3. kebab-case

    1. Vue.component('my-component-name', { /* ... */ })

    引用组件的使用也必须使用 <my-component-name>

  4. pasclaCase

    1. Vue.component('MyComponentName', { /* ... */ })

    引用组件的时候，两种方式都可以。<my-component-name> 和 MyComponentName

    建议：组件注册和在DOM中使用，都建议使用kebab-case (短横线分隔命名)定义。

局部组件

  1. var login =  {
  2.     template: '<h1>登录</h1>'
  3. }
  4. new Vue({
  5.     el: '#app',
  6.     methos:{},
  7.     components: {
  8.         login: 'login',
  9.         register
  10.     }
  11. })
  12. // 使用
  13. // <login></login>

组件传值

父组件给子组件传值 props

  1. 在父组件中定义好数据
  2. 组件调用的时候，使用自定义属性的方式接收
  3. 在子组件的注册中，使用props:['sth'] 接收

  4. 之后可以在子组件的内容中调用传来的数据值

    子组件调用父组件的方法

  5. 在父组件中定义好的方法

  6. 在实例中使用的组件标签中，接受事件，形式如下 <cmt @func="parentFun"></cmt>；
    接收的事件名（func）可自定义，值为父组件中的方法名；
    自定义方法名字的时候，不能使用驼峰命名法，可以使用全小写或者肉串命名法。
  7. 在子组件得模板内容中，设置 普通的 触发事件A
  8. 接收完成后，在子组件的方法A中使用this.$emit('func')调用

    获取DOM和组件引用

    1. <p refs="id">test text</p>
    2. <cmt refs="cmt"></cmt>
    1. this.$refs.Selector // 用法示例
    2. this.$refs.id.innnerText // => <p>--> test text
    3. this.$refs.cmt.message // => <cmt> --> data->message 获取子组件上的data
    4. this.$refs.cmt.show() // => <cmt> --> methods-> show() 获取子组件上的 methods 中定义的 方法