组件的创建
组件创建有三种方式
注意
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" })
组建中使用指令和事件
实例
父子组件的创建
实例
父组件传值给子组件
数据流程如下
实例
子组件传递到父组件
数据流程如下
实例
兄弟之间传递数据
数据流程如下
实例
动态组件
实例