第一種方法 通過調用父組件的方法改變值
子組件
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>
上 (只有一種例外情況),這一點和已經廢棄的 slot
attribute不同。
參考:https://cn.vuejs.org/v2/guide/components-slots.html