动态组件
<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的参数
// 或者放到function(event)参数里边
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>
插槽分发内容
父组件
<alert-box>
Something bad happened.
</alert-box>
子组件
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
