兄弟组件之间的传值--解绑

最新推荐文章于 2024-09-16 06:30:00 发布

左三千

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量134

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/zuoyou9461/article/details/125577422

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第三个组件

<template>
<div>
  第三个组件
  {{ToDay01}}
  <button @click="jiebang">解绑</button>
</div>
</template>

<script>
export default {

  data(){
    return{
      ToDay01:'',
    };
  },
  methods:{
    jiebang(){
      this.$bus.$off()
    }
  },
  mounted() {
    this.$bus.$on('bidi',(i)=>{
      this.ToDay01 = i;
    })
  },
}
</script>

<style scoped>

</style>

第二个组件

<template>
<div>
  <h1 @click="handleClick">
    第二个组件
  </h1>
  <button @click="deleteClicks">删除</button>
  <button @click="clickChange">触发</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      ToDay01: '第二个组件数据'
    };
  },
  props: ['deleteClick'],
  methods: {
    handleClick() {
      this.$emit('xdd', this.ToDay01);
    },
    //   deleteClick() {
    //     this.$off();
    //   },
    // },
    deleteClicks() {
      this.deleteClick();
    },
    clickChange(){
        this.$bus.$emit('bidi',this.ToDay01);
    },
  },
}
</script>

<style scoped>

</style>

父组件申明

<template>
  <div>
<!--    <h1>{{mess}}</h1>-->
<!--    <hr>-->
<!--    <HelloWorld msg="苹果"  :transmit="transmit"/>-->
    <LastD ref="child" :deleteClick="deleteClick" />
    <FirstD  @xd="handleChange" :list="list"/>
    <ToDay01 />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import FirstD from './components/FirstD.vue'
import LastD from './components/LastD.vue'
import ToDay01 from "./components/ToDay01"


export default {
  name: 'App',
  data() {
    return {
      mess: "",
      list: ['小米', '三星', '华为']
    };
  },
  components: {
    // HelloWorld,
    LastD,
    FirstD,
    ToDay01

  },
  methods: {
    transmit(i) {
      this.mess = i;
    },
    handleChange(i) {
      console.log(i)
    },
    deleteClick() {
      this.list.pop();
    },
  },
  mounted() {
    this.$refs.child.$on('xdd',(i)=>{
      console.log(i);
    })
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>