動態(tài)組件
<component v-bind:is="currentTabComponent"></component>
Prop
子組件
<template>
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button @click="emitMethod">Enlarge text</button>
<div v-html="post.content"></div>
</div>
</template>
<script>
export default {
props:['post'],
methods:{
emitMethod(){
//父組件中可以通過$event獲取到這個0.1的參數(shù)
// 或者放到function(event)參數(shù)里邊
this.$emit('emit',0.1)
},
}
};
</script>
父組件
<template>
<div>
<blog-post post="hha" @emit="postFont + $event"></blog-post>
<blog-post post="hha" @emit="getEmit"></blog-post>
</div>
</template>
<script>
export default {
props: ["post"],
methods: {
getEmit(event) {
console.log(event);
},
},
};
</script>
v-model
<input v-model="searchText">
等價于
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
在組件上的寫法
<template>
<input
v-bind:value="inputValue"
v-on:input="$emit('input', $event.target.value)"
/>
</template>
<script>
export default {
props: ["inputValue"],
};
</script>
父組件
<custom-input v-model="searchText"></custom-input>
插槽分發(fā)內(nèi)容
父組件
<alert-box>
Something bad happened.
</alert-box>
子組件
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
