vue基础--组件的基本使用

全局组件

语法

第一个参数：表示组件的名称
第二个参数：表示组件的配置对象
Vue.component('组件的名称', { 
    template:``, // 模板

    //在组件中也是通过data属性来提供数据的,，但是，组件中要求data的值必须是一个函数，使用 函数的返回值（对象），来作为数据
    data:function(){ return [name:'jack'] }, 

    methods: {}, //给组件提供方法
    directives: {}, // 当前组件自定义指令
    filters: {}, // 过滤器
    computed: {},
    watch: {} 
})

组件模板配置项的配置方式

// 字符串形式（注意引号用Tab键上边的键）
template: `<div>
          <h1>这是 Hello 组件</h1>
          <p>你好我叫：{{ name }}</p>
          <button @click="fn">变性</button>
        </div>`

// 模板id
<script type="text/x-template" id="tpl">
    <div>
      <h1>这是 Hello 组件</h1>\
    </div>
</script>

  template: '#tpl'

局部组件

语法

components: {
    组件名1:{},
    组件名2:{}
}

注册局部组件

components: {
        // 属性名表示组件名称
        // 属性的值，表示组件的配置项
        hello: {
          template: `
            <h1 @click="fn">这是一个大标题，很大 === {{msg}}</h1>
          `,

          data() {
            return {
              msg: '666'
            }
          },

          methods: {
            fn() {
              this.msg = 'abc'
            }
          }
        },

        world: {
          template: `
            <h1>word wo de --- {{name}} {{age}} {{gender}}</h1>
          `,

          data() {
            return {
              name: '我的',
              age: 19,
              gender: 'male'
            }
          }
        }
      }
    })