<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件化开发之数据传递</title>
</head>
<body>
<div id="app">
<!-- 父组件给子组件传值 -->
<!-- 静态传递 -->
<menu-item title="来自父亲的值"></menu-item>
<!-- 动态传递 -->
<menu-item :title="ptitle" content='hello'></menu-item>
<!-- 短横线转驼峰的方式 -->
<menu-item1 :menu-title="ptitle1"></menu-item1>
<!-- 多种数据类型传递 -->
<data-item :pstr="pstr" :pnum="pnum" :pboo="true" :parr="parr" :pobj="pobj" ></data-item>
<!-- 子组件给父组件传值 -->
<lay-item :parr="parr" @set-text='setTextSize'></lay-item>
<div :style='{fontSize:fontSize+"px"}'>
{{pstr}}
</div>
<!-- 兄弟组件相互传值 -->
<text-gg></text-gg>
<text-dd></text-dd>
<!-- 组件插槽 -->
<alert-box>有Bug</alert-box>
<alert-box>有一个警告</alert-box>
<alert-box></alert-box>
<!-- 具名插槽 -->
<base-layout>
<p slot="header">标题信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot='footer'>底部管理信息</p>
</base-layout>
<!-- 具名插槽:多标签填充使用:template -->
<base-layout>
<template slot='header'>
<p>标题内容1</p>
<p>标题内容2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template slot='footer'>
<p>底部管理信息11</p>
<p>底部管理信息2</p>
</template>
</base-layout>
<!-- 作用域插槽 -->
<fruit-list :list="list">
<template slot-scope='slotProps'>
<strong v-if='slotProps.info.ID==2'>
{{slotProps.info.name}}
</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*----------------组件数据传递--------------------------*/
/*
接收：组件内部通过props接收传递过来的值
传递：父组件通过属性传递给子组件
*/
Vue.component('menu-item',{
props:['title','content'],
data:function(){
return {
msg:'子组件本身的数据'
}
},
template:'<div>{{msg+"---"+title+"---"+content}}</div>'
})
Vue.component('menu-item2',{
props:['TextTitle'],
template:'<div>{{TextTitle}}</div>'
})
Vue.component('menu-item1',{
props:['menuTitle'],
template:'<div>{{menuTitle}}<menu-item2 TextTitle="HelloText"></menu-item2></div>'
})
Vue.component('data-item',{
props:['pstr','pnum','pboo','parr','pobj'],
template:
`
<div>
<div>字符串:{{pstr}}</div>
<div>数字:{{pnum}}</div>
<div>Bool:{{pboo}}</div>
<div>Arr:
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
</div>
<div>
<span>ID:{{pobj.ID}}</span>
<span>Name:{{pobj.Name}}</span>
</div>
</div>
`
});
/*----------------子组件给父组件传值--------------------------*/
Vue.component('lay-item',{
props:['parr'],
template:
`
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>
{{item}}
</li>
</ul>
<button @click='$emit("set-text")'>点击之后使父级件的文字变大</button>
</div>
`
});
/*----------------兄弟组件传值--------------------------*/
//事件中心:用于监听兄弟组件之间传值的事情
var hub=new Vue();
Vue.component('text-gg',{
data:function(){
return {num:1}
},
template:
`
<div>
<div>GG:{{num}}</div>
<div><button @click='handle'>点击修改DD</button></div>
</div>
`,
methods:{
handle:function(){
//触发兄弟组件的事件
console.log('DD被点击了')
hub.$emit('DD-event',2)
}
},//组件加载完成之后
mounted:function(){
//监听事件
hub.$on('GG-event',(val)=>{
this.num=this.num+val;
});
}
})
Vue.component('text-dd',{
data:function(){
return {num:0}
},
template:
`
<div>
<div>DD:{{num}}</div>
<div><button @click='handle'>点击修改GG</button></div>
</div>
`,
methods:{
handle:function(){
hub.$emit('GG-event',1)
}
},//组件加载完成之后
mounted:function(){
//监听事件
hub.$on('DD-event',(val)=>{
console.log('获取到该事件')
this.num=this.num+val
});
}
})
/*----------------组件插槽--------------------------*/
//slot 插槽固定关键词
Vue.component('alert-box',{
template:
`
<div>
<styong>Errer</styong>
<slot>默认内容</slot>
</div>
`
});
/*----------------具名插槽--------------------------*/
Vue.component('base-layout',{
template:
`
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</header>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
});
/*----------------作用域插槽--------------------------*/
Vue.component('fruit-list',{
props:['list'],
template:
`
<div>
<li :key='item.ID' v-for='item in list'>
<slot :info='item'>{{item.name}}</slot>
</li>
</div>
`
})
var vm = new Vue({
el: "#app",
data: {
ptitle:'动态绑定属性',
ptitle1:'动态绑定属性1',
pstr:'动态绑定数据',
pnum:18,
parr:['A','B','C'],
pobj:{ID:'001',Name:'王'},
fontSize:10,
list:[
{ID:1,name:'apple'},
{ID:2,name:'orrage'},
{ID:3,name:'belala'}
]
},
//方法
methods:{
setTextSize:function(){
this.fontSize+=5;
}
}
})
</script>
</html>
