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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM