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'            }          }        }      }    })