一、组件的介绍
现代前端技术都是由组件构建成一个大型项目,最开始使用组件构建项目的可能是
react
,之后angular2
,vue
都使用组件构建大型项目
二、创建组件的几种方式
-
1、全局创建组件
Vue.component('component2', { template: '<h1>我是组件2</h1>' })
-
2、局部创建组件
var app = new Vue({ el: '#app', data: { }, components: { 'component1': { template: '<h1>你好,我是组件1</h1>' } } })
三、使用组件
-
1、直接使用
<div id="app"> <component1></component1> <component2></component2> </div>
-
2、在组件中使用组件
-
1、全局组件
Vue.component('component2', { template: '<div>我是组件2<component4></component4></div>' }) Vue.component('component4', { template: '<h3>组件</h3>' })
-
2、局部组件
... 'component1': { template: '<div><hello></hello></div>', components: { 'hello': { template: '<span>hello word</span>' } } }, ...
-
三、组件中传递数据
-
1、在组件中使用
data
... 'component3': { template: '<div>hi--{{name}}</div>', // 这个必须的一个函数 data() { return { name: 'word' } } } ...
2、创建的组件中不能使用
new Vue()
中的data
,因为这是别的组件的数据- 3、组件中使用方法
- 4、组件中使用过滤器
- 5、在组件中创建组件
四、组件之间的通讯
- 1、父组件通过属性传递数据到子组件
- 2、子组件同个事件传递数据到父组件
-
3、父组件通过属性传递数据到子组件
<div id="app"> <!-- 属性comname传递数据name到com组件中 --> <com v-bind:comname="name"></com> <parent></parent> </div>
... // 创建一个父组件 Vue.component('parent', { template: '<div><child v-bind:bookname="bookname"></child></div>', data() { return { bookname: '西游记' } } }); // 创建一个子组件 Vue.component('child', { template: '<span>{{bookname}}</span>', props: ['bookname'] }); // 创建一个组件 Vue.component('com', { template: '<div>{{comname}}</div>', // 使用props接收一个数组的数据 props: ['comname'] }); var app = new Vue({ el: '#app', data: { name: '张三', age: 20 } }) ...
-
4、子组件通过事件传递数据到父组件
<div id="app"> <!-- 通过事件绑定,com通过子组件发送过来的事件名称,appcom是父组件中事件 --> <com @com="appcom"></com> </div>
var app = new Vue({ el: '#app', data: { }, methods: { appcom() { console.log(arguments); } }, components: { 'com': { template: '<div><input type="button" value="按钮" @click="post"/></div>', methods: { post() { // 通过this.$emit发送com事件名称到父组件,发送一个对象数据到父组件 this.$emit('com', { 'name': '张三', 'age': 20 }); } } } } })