// 注册组件，传入一个扩展过的构造器
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:'<h1 @click="run()">这是一个头部组件11--{{name}}--{{msg}}</h1>',
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 操作上。
定义模版的形式：
<script type=“x-template” id=“header”>。。。内容 </script>
template:'#header’
<template id=“footer”> 。。。内容 </template>
template:'#footer’
组件嵌套组件
components:{
'v-header':{
template:'#header',
data:function(){
return {
msg:'这是一个header组件的数据'
}
},
components:{ /*组件里面嵌套组件*/
'v-nav':{
template:'#nav',
}
}
}
}
父组件－－子组件传值
Template 标签内 给子组件设置属性
<!--父亲组件给子组件传数据-->
<v-nav :msg=“msg” :n=“name”></v-nav>
在子组件的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 name="ul-slot">
内容可通过 slot属性值查找是否显示默认<ul slot="ul-slot">
