1. 监听子组件事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Component</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{fontSize:newsFontSize+'px'}">
Hello Component!<br/>
<news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=1"></news-show>
</div>
</div>
<script type="text/javascript">
Vue.component("news-show",{
template:`<p>
<span>TITLE:{{newsprops.title}}</span>
<span>CONTENT:{{newsprops.content}}</span>
<span>TIME:{{newsprops.time}}</span>
<button v-on:click="$emit(\'zoom-in-text\')">放大文字</button>
</p>`,
props:["newsprops"]
});
var vm = new Vue({
el:app,
data:{
news:[
{title:"标题1",content:"内容1",time:"2020-01-01"},
{title:"标题2",content:"内容2",time:"2020-01-02"},
{title:"标题3",content:"内容3",time:"2020-01-03"},
],
newsFontSize:20
}
});
</script>
</body>
</html>以上代码理解方式如下：
2. 使用事件抛出一个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Component</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{fontSize:newsFontSize+'px'}">
Hello Component!<br/>
<news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event"></news-show>
</div>
</div>
<script type="text/javascript">
Vue.component("news-show",{
template:`<p>
<span>TITLE:{{newsprops.title}}</span>
<span>CONTENT:{{newsprops.content}}</span>
<span>TIME:{{newsprops.time}}</span>
<button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
</p>`,
props:["newsprops"]
});
var vm = new Vue({
el:app,
data:{
news:[
{title:"标题1",content:"内容1",time:"2020-01-01"},
{title:"标题2",content:"内容2",time:"2020-01-02"},
{title:"标题3",content:"内容3",time:"2020-01-03"},
],
newsFontSize:20
}
});
</script>
</body>
</html>以上代码理解方式如下：
3. 组件的插槽功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Component</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{fontSize:newsFontSize+'px'}">
Hello Component!<br/>
<news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event">插槽内容，哈哈哈！</news-show>
</div>
</div>
<script type="text/javascript">
Vue.component("news-show",{
template:`<p>
<span>TITLE:{{newsprops.title}}</span>
<span>CONTENT:{{newsprops.content}}</span>
<slot></slot>
<span>TIME:{{newsprops.time}}</span>
<button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
</p>`,
props:["newsprops"]
});
var vm = new Vue({
el:app,
data:{
news:[
{title:"标题1",content:"内容1",time:"2020-01-01"},
{title:"标题2",content:"内容2",time:"2020-01-02"},
{title:"标题3",content:"内容3",time:"2020-01-03"},
],
newsFontSize:20
}
});
</script>
</body>
</html>
以上内容的重点如下：
