vue 组件

1.组件的定义及意义：以UI的角度来划分，方便复用

2.全局组件的使用介绍：

 

//2.1：使用组件构造器，新建一个选项对象
var com1=Vue.extend({
　　template:'<h1>com1</h1>'
})
//2.2:注册组件：Vue.component()方法的两个参数，第一个是组件的名称，第二个参数是选项对象

Vue.component('mycom1',com1)

//2.3在vue的实例的作用范围内使用组件
<mycom1></mycom1>


//2.4 新写法1：将前两步的合并写法
Vue.component('mycom1',{template:'<h1>mycom1</h1>'})

//2.5 新写法2：将template的值设置为一个template标签

Vue.component('mycom1',{template:'#mycom1'})
<template>
　　<div>
　　<h1>demo</h1>
　　</div>
</template>

//2.6 新写法3：比较直观

var demo={
　　　　template:'<h1>demo</h1>'
}
Vue.component('mycom1',demo)

 3.私有组件：

//组件的data必须是函数，为了数据的私有化
var demo={
　　template:'<h1>demo</h1>',
　　data:function(){
　　　　return {
　　　　name:'demo'
　　　　}　　　　
　　},
　　methods:{}
}
var vm=new Vue({
　　el:'#app',
　　components:{
　　　　'mycom':demo
　　}

})

4.组件的占位符：

//不再需要组件名作为标签
<component is=“'组件名'”></component>

5.组件的嵌套：

//组件可以有一个components属性
var childcom={
　　template:'<h1>子组件的内容</h1>'
　　　　}
var parentcom={
　　template:'<div><h1>父组件</h1><子组件名></子组件名></div>'，
　　components:{
　　　　"子组件名"：childcom
　　　　}
　　}
var parent=Vue.component("父组件名"，parentcom)

6.父组件传值给子组件：props

//在子组件内部加一个props属性
//在父组件使用子组件的时候，将自身的data传递给子组件

var childcom={
　　template:'<h1>子组件的内容--{{子组件属性}}--</h1>',
//父组件传递过来的数据得在props里面定义一下
//props的数据都是readonly的
　　props:['message']
　　　　}
var parentcom={
　　template:'<div><h1>父组件</h1><子组件名 :子组件属性=“父组件属性数据”></子组件名></div>'，
　　data:function(){ruturn {父属性：属性值}}
　　components:{
　　　　"子组件名"：childcom
　　　　}
　　}
var parent=Vue.component("父组件名"，parentcom)

//使用props动态传递数据：

7.父组件传递方法给子组件：

//

8.slot插槽：

demo

9.子组件向父组件传值：

demo

 

10.任意组件之间的通信：

demo