vue 双向绑定子组件改变父组件中的显示值

第一种方法  通过调用父组件的方法改变值

子组件

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

https://www.cnblogs.com/axl234/p/7797247.html

https://blog.csdn.net/wxl1555/article/details/84107969