<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.bg_color_odd{
background-color:#0fa367;
}
.bg_color_even{
background-color:#f1f309;
}
.demo-alert-box{
background-color:#ff9931;
}
</style>
</head>
<body>
<h1>component</h1>
<h2>子組件可以通過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件
父級組件可以通過 v-on 監聽子組件實例的任意事件 </h2>
<hr>
<div id="app">
<div :style="{ fontSize: postFontSize + 'em' }">
<btn-comp v-bind:class='{bg_color_even:isToggle}'
v-bind:fpmessage='xmessage'
v-on:toggle-text="toggleMethod"
v-on:enlarge-text="postFontSize += 0.1"
v-on:enlarge-text-par="enlargetextparMethod"
v-on:small-text="postFontSize -= 0.1"
v-on:small-text-par="postFontSize -= $event"
></btn-comp>
</div>
</div>
<div id="app2">
<h1>component ues v-model</h1>
<hr>
<custom-input v-model="searchText"></custom-input>
<alert-box >{{alertmessage}} {{alertmessage2}}</alert-box>
<hr>
<h3>component v-bind:is 切換</h3>
<component v-bind:is="whichcomp"></component>
<button v-on:click="chooseComp('custom-input')">custom-input</button>
<button v-on:click="chooseComp('alert-box')">alert-box</button>
</div>
<script type="text/javascript">
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
var app2 = new Vue({
el: "#app2",
data:{
searchText:'',
alertmessage:'alert abc .',
alertmessage2:' def .',
whichcomp:''
}
,methods:{
chooseComp:function(event){
this.whichcomp =event
}
}})
Vue.component('btn-comp',{
data:function(){
return {count:0}
},
props:['fpmessage']
,
template:
'<div >'+
'<h3>{{fpmessage}}</h3> '+
'<button v-on:click="count++">you click button {{count}} times.</button>'+
'<button v-on:click="$emit(\'enlarge-text\')" > Enlarge text </button>'+
'<button v-on:click="$emit(\'enlarge-text-par\',0.3)" > Enlarge text by param </button>'+
'<button v-on:click="$emit(\'small-text\')" > Small text </button>'+
'<button v-on:click="$emit(\'small-text-par\',0.2)" > Small text by param</button>'+
'<button v-on:click="$emit(\'toggle-text\')" > toggle text </button>'+
'</div>'
})
var app = new Vue({
el: "#app",
data:{
xmessage: 'ABC' ,
postFontSize:1,
isToggle:true
},
methods:{
toggleMethod:function (){
this.isToggle=!this.isToggle
},
enlargetextparMethod:function (enlargeAmount){
this.postFontSize+=enlargeAmount
}
}
})
</script>
</body>
</html>