1.is的使用
在html5标准中<tbody>标签里只能写<tr>,但又希望row组件的内容显示在<tr>中，可以使用is属性
<body>
<div id="app" >
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
var vm=new Vue({
el:'#app'
});
</script>
</body>2.定义data
在根组件里，定义data可以直接通过对象定义，但在非根组件里定义data，data必须是一个函数，而且要返回一个包含数据的对象，这是因为一个子组件不像根组件只会被调用一次，子组件在很多地方都会被调用，每一个子组件都应该有自己的数据空间，而不应该共享同一个数据。
<script>
Vue.component('row',{
data:function(){//子组件定义data
return{
content:'this is content'
}
},
template:'<tr><td>{{content}}</td></tr>'
});
var vm=new Vue({
el:'#app',
data:{//根组件定义data
message:'lla'
}
});
</script>3.使用ref属性操作Dom
通过refs获取到的是这个组件的引用
<body>
<div id="app" >
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data:function(){
return {
number:0
}
},
methods:{
handleClick:function(){
this.number++;
this.$emit('change')
}
}
});
var vm=new Vue({
el:'#app',
data:{
total:0
},
methods:{
handleChange:function(){
this.total=this.$refs.one.number+this.$refs.two.number;
}
}
});
</script>
</body>4.父子组件传值（单向数据流）
父组件可以随意的向子组件传递参数，但是子组件不要去修改父组件传过来的值，因为如果传递的是引用类型的数据，该数据被其他子组件使用，那改变这个值 就会影响其他子组件的使用。
可以通过在子组件中data设置一个副本，去更改这个副本的值。
<body>
<div id="app" >
<counter :count="1" ></counter>
<counter :count="3"></counter>
<!--count加冒号，3就是数字了。因为这样后面跟的是表达式-->
</div>
<script>
var counter={
props:['count'],
data:function(){
return {
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++;
}
}
};
var vm=new Vue({
el:'#app',
components:{
counter:counter
}
});
</script>
</body>5.父子组件事件监听
<child @click="handleClick"></child>
<!--这样父组件监听的事件并不是原生的click事件，而是子组件向外触发的自定义事件，需要子组件 this.$emit('click')-->
//-------------------------子组件
Vue.component('child',{
template:'<div @click="handleChildClick">child</div>', //子组件监听的才是原生的click事件
methods:{
handleChildClick:function (){
alert('click')
this.$emit('click')
}
}
})
//-------------------如果想让父组件监听原生事件，可以加上.native
<child @click.native="handleClick"></child>6.非父子组件传值
1.运用发布订阅模式（总线机制/Bus/发布订阅模式/观察者模式）
2.vuex
<body>
<div id="app" >
<child content="dell"></child>
<child content="li"></child>
</div>
<script>
Vue.prototype.bus=new Vue();
Vue.component('child',{
props:{
content:String
},
data:function(){
return{
selfContent:this.content
}
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function(){
this.bus.$emit('change',this.selfContent)
}
},
mounted:function(){
var this_=this;
this.bus.$on('change',function(msg){
this_.selfContent=msg;
})
}
})
var vm=new Vue({
el:'#app',
methods:{
}
});
</script>7.在Vue中使用插槽（slot）
更方便的向子组件传递dom元素，子组件使用这个插槽内容也很方便
<div id="app" >
<child>
<h1>dell</h1>
</child>
</div>
<script>
Vue.prototype.bus=new Vue();
Vue.component('child',{
template:'<div><p>hello</p><slot>默认内容</slot></div>'//如果父组件没有传递dom。插槽就显示默认内容
})
var vm=new Vue({
el:'#app'
});
</script>