1、组件间数据交互中 props属性及用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<!-- 静态绑定
<!-- <menu-item title='来自父组件的值'></menu-item> -->
<!-- 动静结合组件 -->
<!-- <menu-item :title='ptitle' content='hello'></menu-item> -->
<menu-item :menu-title='ptitle'></menu-item>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.component('menu-item', {
// props:['title','content'],
/*
组件内部通过props接收传递过来的值 ————> 数组
porpos属性命名规则
在props中使用驼峰形式，模板中需要使用短横线形式；
字符串形式的模板中没有这个限制。
*/
props: ['menuTitle'],
// data: function(){
// return{
// msg: '子组件本身的数据'
// }
// },
// template: '<div>{{msg + "---" + title + "---" + content}}</div>'
template: '<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>'
});
// 字符串形式的模板中没有这个限制。
Vue.component('third-com', {
props: ['testTitle'],
template: '<div>{{testTitle}}</third-com></div>'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中的内容',
ptitle: '动态属性绑定'
}
});
</script>
</body>
</html>
2、子组件向父组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text= 'handle'></menu-item>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-基本用法:
1、子组件通过自定义事件 向父组件传递信息
<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
2、父组件监听子组件事件
<menu-item :parr='parr' @enlarge-text= 'handle'></menu-item>
props传递数据原则： 单项数据流（子组件不能像父组件传递值，父组件可像子组件传递值）。
*/
Vue.component('menu-item',{
props: ['parr'],
template:`
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<button @click='parr.push("lemon")'>点击</button>
<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中的内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(){
//扩大字体大小
this.fontSize += 5;
}
}
});
</script>
</body>
</html>
3、子组件通过自定义事件向父组件传值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text= 'handle($event)'></menu-item>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
子组件通过自定义事件向父组件传值-基本用法:
1、子组件通过自定义事件 向父组件传递信息
<button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小5递加</button>
2、父组件监听子组件事件
<menu-item :parr='parr' @enlarge-text= 'handle($event)'></menu-item>
*/
Vue.component('menu-item',{
props: ['parr'],
template:`
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<button @click='parr.push("lemon")'>点击</button>
<button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小5递加</button>
<button @click='$emit("enlarge-text",10)'>扩大父组件中字体大小10递加</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中的内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
//扩大字体大小
//此时的值由子组件传递过来的，而不是由父组件写死的！
this.fontSize += val;
}
}
});
</script>
</body>
</html>
4、非父子组件之间的传值及销毁事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>父组件</div>
<div>
<button @click="handle">销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
兄弟组件之间数据传递
*/
// 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function() {
return {
num: 0
}
},
template: `
<div>
<div>TOM: {{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function() {
//触发事件：
hub.$emit('jerry-event', 1);
}
},
mounted: function() {
//监听事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function() {
return {
num: 0
}
},
template: `
<div>
<div>JERRY: {{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function() {
//触发事件：
hub.$emit('tom-event', 2);
}
},
mounted: function() {
//监听事件
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function() {
//销毁事件：
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
})
</script>
</body>
</html>
5、组件插槽的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<alert-box>有bug发生！</alert-box>
<alert-box>有一个警告！</alert-box>
<alert-box></alert-box>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
组件插槽
*/
Vue.component('alert-box', {
template: `
<div>
<strong>ERROR</strong>
<slot>默认内容</slot>
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
6、具名插槽的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 一般用法： -->
<base-layout>
<p slot='header'>标题信息</p>
<!-- 没匹配到的填充到 默认插头中 -->
<p>主要内容1</p>
<p>主要内容2</p>
<p slot='footer'>底部信息</p>
</base-layout>
<br />
<!-- 复杂点的用法： -->
<base-layout>
<template slot='header'>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<!-- 没匹配到的填充到 默认插头中 -->
<p>主要内容1</p>
<p>主要内容2</p>
<template slot='footer'>
<p>底部信息1</p>
<p>底部信息2</p>
</template>
</base-layout>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
具名插槽
*/
Vue.component('base-layout', {
template: `
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
7、作用域插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.current{
color: orange;
}
</style>
</head>
<body>
<div id="app">
<fruit-list :list='list'>
<!-- 父组件对子组件的内容进行加工处理 -->
<template slot-scope='slotProps'>
<strong v-if='slotProps.info.id==2' class="current">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
作用域插槽“
应用场景：父组件对子组件的内容进行加工处理；
*/
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: {
list: [{
id: 1,
name: 'apple'
}, {
id: 2,
name: 'orange'
}, {
id: 3,
name: 'banana'
}]
}
});
</script>
</body>
</html>
