第一種方法 通過調用父組件的方法改變值
子組件
MyDemo.vue
<template>
<div>
<span @click="test">{{title}}</span>
</div>
</template>
<script>
export default {
name: 'mydemo',
props:{
title:String
},
components:{
},
data(){
return {
}
},
methods:{
test(){
//this.$emit("ceshi")
this.$emit('myclick', "方法一")
}
}
}
</script>
父組件調用
<template>
<el-container>
<el-header>Header</el-header>
<el-main> <my-demo :title="abc" @myclick="fangfayi" ></my-demo> </el-main>
<!-- <div>
<my-demo :title.sync="abc" ></my-demo>
</div> -->
<br/>
{{abc}}
<el-footer>Footer</el-footer>
</el-container>
</template>
<script>
import MyDemo from '../components/MyDemo.vue';
export default {
components: {
MyDemo
},
data(){
return{
msg:'test7777',
abc:'55555'
}
},
methods:{
fangfayi(vale){
this.abc=vale
}
}
}
</script>
運行效果：
點擊第一個55555：顯示
第二種方法： 通過
sync 修飾符
修改子組件，注釋方法一
<template>
<div>
<span @click="test2">{{title}}</span>
</div>
</template>
<script>
export default {
name: 'mydemo',
props:{
title:String
},
components:{
},
data(){
return {
}
},
methods:{
test(){
//this.$emit("ceshi")
this.$emit('myclick', "方法一")
},
test2(){
//this.$emit("ceshi")
this.$emit('update:title', "方法二")
}
}
}
</script>
父組件調用
<template> <el-container> <el-header>Header</el-header> <!-- <el-main> <my-demo :title="abc" @myclick="fangfayi" ></my-demo> </el-main> --> <div> 第二種方法 <my-demo :title.sync="abc" ></my-demo> </div> <br/> {{abc}} <el-footer>Footer</el-footer> </el-container> </template> <script> import MyDemo from '../components/MyDemo.vue'; export default { components: { MyDemo }, data(){ return{ msg:'test7777', abc:'55555' } }, methods:{ // fangfayi(vale){ // this.abc=vale // } } } </script>
運行
點擊第一個55555 顯示
參考： https://cn.vuejs.org/v2/guide/components-custom-events.html
插槽
加上 <slot></slot>
在父組件中調用
這樣在頁面上才會顯示值。
沒有插槽就不會顯示
注意 v-slot 只能添加在 <template> 上 (只有一種例外情況)，這一點和已經廢棄的 slotattribute不同。
參考：https://cn.vuejs.org/v2/guide/components-slots.html