1.父组件向子组件传值
父组件向子组件传值，通过属性的方式进行，子组件用props进行接收。
注意在这个传值过程中，有一个单向数据流规定，子组件不能直接修改父组件传递的值，因为如果父组件传递的值类型是引用类型的数据的话，在其他地方引用了这个值，那么子组件修改值得时候也会影响其他组件,如果一定要修改，可以复制一个副本，修改那个副本。
<div id="app"><counter :count="0"></counter></div>
<script>
var counter = {
props:['count'],
data:function(){
return {
number:this.count//复制了一个副本，下面只需修改number，不再使用count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++
},
}
}
var vm = new Vue({
el: "#app",
components: {
counter
},
})
</script>
2.子组件向父组件传值,通过$emit()给父组件传递一个事件，父组件监听这个事件
<div id=app>
<counter :count="0" @inc="handleInc"></counter>
<counter :count="1" @inc="handleInc"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props:['count'],
data:function(){
return {
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++
this.$emit('inc',2)//可以后面携带很多个参数
},
}
}
var vm = new Vue({
el:"#app",
data:{
total:1
},
components:{
counter
},
methods:{
handleInc:function(step){
//alert(step)
this.total+=step
}
}
})
</script>
3.非父子组件之间的传值
通过发布订阅模式传值，观察者模式，在vue中叫做总线机制
<div id=app>
<child content='dell'></child>
<child content='lee'></child>
</div>
<script>
//在vue的prototype上挂载一个bus的属性，属性指向vue实例，后面每个组件上都有bus的属性
Vue.prototype.bus = new Vue()
Vue.component('child', {
data:function(){
return {
selfContent:this.content//单向数据流机制，赋值一个父组件值的副本
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function () {
// alert(this.content)
this.bus.$emit('change',this.selfContent)
}
},
mounted:function(){
var this_ = this//这里的this作用域会发生变化，所以提前存储一下
this_.bus.$on('change',function(msg){
this_.selfContent = msg
})
}
})
var vm = new Vue({
el: "#app",
})
</script>
4.slot的用法
<div id=app>
<child>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</child>
</div>
<script>
Vue.component('child', {
template: `<div>
<slot name="header"></slot>
<p>dell</p>
<slot name="footer"></slot>
</div>`
})
var vm = new Vue({
el: "#app",
})
</script>
5.slot-scope作用域插槽
<div id=app>
<child>
<template slot-scope="props">
<!-- //props接收数据，模板可以直接读取数据 -->
<li>{{props.item}}--hellp</li>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
template:
`
<div>
<ul>
<slot v-for="item of list" :item=item></slot>//这里循环一个数据，:item=item是给父组件传递一个数据
</ul>
</div>
`
})
var vm = new Vue({
el: "#app",
})
