Vue组件自我总结

组件的创建

组件创建有三种方式
注意
1. 模板template中只能有一个根节点;
2. 组件的名字，如果采用驼峰命令的话，在使用的时候，就要加上 “-”，比如组件名字叫indexA，那么在使用的时候就叫index-a

第一种方法
通过Vue.extend()和Vue.component()两个方法创建
Vue.extend()函数会返回一个组件构造器,它里面包含一个参数,它是一个对象,里面是一些配置项

Vue.component()函数会利用Vue.extend()返回的构造器创建一个组件实例;参数1:组件名参数

  var Index = Vue.extend({
        // 指定组件显示的模板
        template: "<div>我是首页</div>"
    })
    Vue.component("indexA", Index)  //indexA是模板名

在DOM元素调用创建的模板

    <div id="app">
            <index-A></index-A> 
    </div>

第二种方法
直接使用Vue.component()创建

Vue.component("indexB", { template: "<div>我是index-B</div>" })  //本质上还是调用了Vue.extend

在DOM元素调用创建的模板

    <div id="app">
            <index-B></index-B> 
    </div>

第三种
在DOM中创建模板
在通过模板ID选中它

    <div id="app">
            <index-C></index-C>    //调用模板
    </div>

    //创建模板
            <template id="C">
                    <div>我是index-C</div>
            </template>

选择模板关联:

Vue.component("indexC", { template: "#C" })

组建中使用指令和事件
实例
组件事件注册实例

父子组件的创建
实例
父子组件创建

父组件传值给子组件
数据流程如下
实例
数据传递过程

子组件传递到父组件
数据流程如下
实例
数据传递过程

兄弟之间传递数据
数据流程如下
实例
兄弟数据传递

动态组件
实例

组件的创建

猜你喜欢