vue：2-2，组件

// 注册组件，传入一个扩展过的构造器

Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象（自动调用 Vue.extend）

Vue.component('my-component', { /* ... */ })

// 获取注册的组件（始终返回构造器）

var MyComponent = Vue.component('my-component')

2、vue实例化  中 components  {  ‘组件名’: 组件内容  }

组件内部定义数据／函数

var Header={ /*1.定义组件 */

        template:'

这是一个头部组件11--{{name}}--{{msg}}

',

        data:function(){  /*组件里面定义数据的方式*/

            return {

                name:'李四',

                msg:'this is a  component'

            }

        },

methods:{

            run(){

                this.name='王五';

                alert('this is a  Header component  run');

            }

        }

    }

模版

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

定义模版的形式：

template:'#header’

template:'#footer’

组件嵌套组件

components:{

'v-header':{

template:'#header',

data:function(){

return {

msg:'这是一个header组件的数据'

}

},

components:{  /*组件里面嵌套组件*/

'v-nav':{

template:'#nav',

}

}

}

}

父组件－－子组件传值

Template 标签内 给子组件设置属性

在子组件的components设置 

props:[‘msg’,‘n’],  /*子组件接收数据*/

子组件的template内通过｛｛｝｝直接绑定数据即可

1、子组件－－－父组件传值 $emit

2、非父子组件 之间 传值—空vue对象  $emit(‘ ’,数据) 发送  $on 接收

3、父组件操作子组件---$refs          $parent 子组件操作父组件数据

使用$refs获取dom    在mounted函数中

/*nextTick里面的代码会在DOM更新后执行*/---mounted函数中执行

$ nextTick  this.$nextTick(function(){    })

使用slot发布内容

Slot标签添加 属性

内容可通过  slot属性值查找是否显示默认