【全网最全】Vue 组件之间的传值

April_zk

已于 2022-07-01 17:52:34 修改

阅读量1.1k

点赞数 3

文章标签： vue.js 前端 html

于 2022-07-01 17:40:46 首次发布

本文链接：https://blog.csdn.net/qq_45747074/article/details/125563096

版权

1.组件间的传值方法简述

父组件 =data=> 子组件
- 子组件通过 props
子组件 =data=> 父组件
- 父组件向子组件传递一个函数（callback）
- 使用 $emit 自定义事件
- 使用 .sync 简化并实现传值的双向绑定
爷组件 =data=> 孙组件
- 在孙组件上使用 v-bind="$attrs"
孙组件 =data=>爷组件
- 在孙组件上使用 v-on="$listeners"
兄弟组件【方法且适用于以上所有】
- 采用全局事件总线 $bus
- 采用第三方库 pubsub【订阅发布】
- 采用 Vuex 状态管理库

【在开始之前使用到的三个组件在这里做一个简单的展示】

1.爷组件

<template>
  <div class="Granpa">
    <h3>我是GrandPa组件</h3>
    <div class="inner">
      <h5>下面是Father组件</h5>
      <Father></Father>
    </div>
  </div>
</template>

<script>
import Father from "./Father.vue";
import "../../assets/comment.css";
export default {
  data() {
    return {};
  },
  components: {
    Father,
  },
};
</script>

<style lang="scss" scoped>
.Granpa {
  width: 260px;
  height: max-content;
  padding: 40px;
  background: red;
}

.inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
  //   margin: auto;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

3.孙组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div></div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

4.公共样式库 comment.css

h3 {
  color: white;
  font-size: 16px;
}

运行效果如下：

1.父组件 =data=> 子组件

父组件向子组件传值主要使用到了 v-bind 【简写“:”】指令和 props 选项（option），比如现在我们将 msg:"儿砸" 传递给子组件，并在子组件中进行一个展示。

1.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son :toSonMsg="msg"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {
      msg: "儿砸",
    };
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
  //   margin: auto;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.子组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      这是父组件传递给我的消息<i>{{ toSonMsg }}</i>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  props: {
    toSonMsg: String,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果：

2.子组件 =data=> 父组件

Ⅰ。利用【父组件向子组件传值，向子组件传递一个函数】假设我们传递的消息是 msg:"爸比"，其中 sendFunction 就是父组件传递给子组件的函数（其中参数就是子组件传给父组件的值），toSonFunc 是子组件所期望得到的值【数据类型应为 Function】；在子组件定义单击事件 sendMsgFather 然后调用函数toSonFunc 来实现子组件向父组件传值。

1.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div>
      这是Son组件传递给我的值<i>{{ showMsg }}</i>
    </div>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son :toSonFunc="sendFunction"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {
      showMsg: "",
    };
  },
  methods: {
    // 函数
    sendFunction: function (valueFromSon) {
      this.showMsg = valueFromSon;
    },
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
  //   margin: auto;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.子组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      <button @click="sendMsgFather">发送消息给Father</button>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  props: {
    toSonFunc: Function,
  },
  data() {
    return {
      msg: "爸比",
    };
  },
  methods: {
    sendMsgFather: function () {
      this.toSonFunc(this.msg);
    },
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果：

Ⅱ。【使用 $emit 自定义事件实现】并设置传值为 msg: "爸比，你会唱小星星么？"，当 $emit “发射，触发”后会执行 @toFatherClick 该自定义事件中的回调函数 sendFunction; 【回调函数的触发时机正是当函数 “发射，触发” 后回调会被执行】

1.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div>
      这是Son组件传递给我的值<i>{{ showMsg }}</i>
    </div>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son @toFatherClick="sendFunction"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {
      showMsg: "",
    };
  },
  methods: {
    // 函数
    sendFunction: function (valueFromSon) {
      this.showMsg = valueFromSon;
    },
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
  //   margin: auto;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.子组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      <button @click="sendMsgFather">发送消息给Father</button>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  data() {
    return {
      msg: "爸比，你会唱小星星么？",
    };
  },
  methods: {
    sendMsgFather: function () {
      this.$emit("toFatherClick", this.msg);
    },
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果

Ⅲ。.sync 可以简化这个传值的一个过程，并实现父组件传递给子组件的值的一个双向绑定

【举个简单的栗子就是子组件中的按钮控制父组件中的显示与隐藏】

如果刚开始直接写 .sync 可能有点突兀【这一点官网上写得并不是太好】，而且不太好理解，我们以最常规的子组件向父组件传值为基础来走一遍思路。

1.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="box" v-show="isShow">
      <h1>我是可以隐藏的标题</h1>
    </div>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son :isShow="isShow" @toFatherClick="changeShow"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {
      // 控制着 盒子的显示（true） 和 隐藏（false）
      isShow: true,
    };
  },
  methods: {
    changeShow: function (val) {
      this.isShow = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 120px;
  height: 120px;
  background: pink;
  margin: auto;
}
</style>

2.子组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      <button @click="sendMsgFather">点击我隐藏/显示Father中的title</button>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  props: ["isShow"],
  data() {
    return {};
  },
  methods: {
    sendMsgFather: function () {
      this.$emit("toFatherClick", !this.isShow);
    },
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果

接下来我们就要对相关的代码进行一个变形了，首先是父组件中的一下几处

......
<Son :isShow="isShow" @toFatherClick="changeShow"></Son>
......
  methods: {
    changeShow: function (val) {
      this.isShow = val;
    },
  },
......

改变以后的，上面的代码可以精简为以下【说明：changeShow 中的默认传递的参数是 $event ，这里是比较特殊的这个$event 其实就是子元素那边传递过来的值(载荷)】

 <Son :isShow="isShow" @toFatherClick="isShow = $event"></Son>

然后就是子组件里面的自定义事件的名称原来是 toFatherClick 现在我们更改为 update:isShow 【注意你没有看错，这个事件的中间有 ":" 并不是有什么实际意义】

//原来的
    sendMsgFather: function () {
      this.$emit("toFatherClick", !this.isShow);
    },
//改变之后的
    sendMsgFather: function () {
      this.$emit("update:isShow", !this.isShow);
    },

【相信有了上面的这个解释就连官网的介绍应该都能看懂了呢这里】

更改过自定义事件后，那么在父组件中的 Son 就变成了这样【太长、太复杂】

 <Son :isShow="isShow" @update:isShow="isShow = $event"></Son>

使用 sync 后，就变得非常的简洁了。

<Son :isShow.sync="isShow"></Son>

改变以后的代码附上，感兴趣的小伙伴可以试试

父组件更改变以后的代码

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="box" v-show="isShow">
      <h1>我是可以隐藏的标题</h1>
    </div>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son :isShow.sync="isShow"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {
      // 控制着 盒子的显示（true） 和 隐藏（false）
      isShow: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 120px;
  height: 120px;
  background: pink;
  margin: auto;
}
</style>

子组件改变以后的代码

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      <button @click="sendMsgFather">点击我隐藏/显示Father中的title</button>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  props: ["isShow"],
  data() {
    return {};
  },
  methods: {
    sendMsgFather: function () {
      this.$emit("update:isShow", !this.isShow);
    },
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

3.爷组件=data=> 孙组件

假设我们现在需要爷组件向孙组件传递一个消息 sendMessage: "真是爷爷的乖孙子！！！"

其实是有两种思路的，最容易想到的就是爷组件传父组件父组件传子组件【但是采用这种普通的方式代码不够精简】，另一种就是使用 v-bind="$attrs" 会直接跨过有该属性的组件，到下一级组件【像一根导管一样】，正常使用props 进行接收即可。

1.爷组件

<template>
  <div class="Granpa">
    <h3>我是GrandPa组件</h3>
    <div class="inner">
      <h5>下面是Father组件</h5>
      <Father :sendMessage="sendMessage"></Father>
    </div>
  </div>
</template>

<script>
import Father from "./Father.vue";
import "../../assets/comment.css";
export default {
  data() {
    return {
      sendMessage: "真是爷爷的乖孙子！！！",
    };
  },
  components: {
    Father,
  },
};
</script>

<style lang="scss" scoped>
.Granpa {
  width: 260px;
  height: max-content;
  padding: 40px;
  background: red;
}

.inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son v-bind="$attrs"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 120px;
  height: 120px;
  background: pink;
  margin: auto;
}
</style>

3.孙组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>这是爷爷想要给我说的：{{ sendMessage }}</div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  props: {
    sendMessage: String,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果

4.孙组件=data=> 爷组件

思路与爷组件向孙组件传值类似，只不过我们在这里要使用一个 v-on="$listeners"，假如我们向爷组件传递一个 msgToGranPa : "爷爷我想你了"

1.爷组件

<template>
  <div class="Granpa">
    <h3>我是GrandPa组件</h3>
    <div>这是孙子传过来的消息：{{ msg }}</div>
    <div class="inner">
      <h5>下面是Father组件</h5>
      <Father @sendMsgPa="getMsg"></Father>
    </div>
  </div>
</template>

<script>
import Father from "./Father.vue";
import "../../assets/comment.css";
export default {
  data() {
    return {
      // 孙子传递过来的消息
      msg: "",
    };
  },
  components: {
    Father,
  },
  methods: {
    getMsg: function (val) {
      this.msg = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.Granpa {
  width: 260px;
  height: max-content;
  padding: 40px;
  background: red;
}

.inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

2.父组件

<template>
  <div class="Father">
    <h3>我是Father组件</h3>
    <div class="center">
      <h5>下面是Son组件</h5>
      <Son v-on="$listeners"></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
import "../../assets/comment.css";
export default {
  // 引入Son组件
  components: {
    Son,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.Father {
  width: 150px;
  height: max-content;
  background: green;
  padding: 40px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 120px;
  height: 120px;
  background: pink;
  margin: auto;
}
</style>

3.孙组件

<template>
  <div class="Son">
    <h3>我是Son组件</h3>
    <div>
      <button @click="sendMsgToGrandPa">点击我给爷爷留言</button>
    </div>
  </div>
</template>

<script>
import "../../assets/comment.css";
export default {
  data() {
    return {
      msgToGranPa: "爷爷我想你了",
    };
  },
  methods: {
    sendMsgToGrandPa: function () {
      this.$emit("sendMsgPa", this.msgToGranPa);
    },
  },
};
</script>

<style lang="scss" scoped>
.Son {
  width: 100px;
  height: max-content;
  background: yellow;
  padding: 40px;
}
</style>

效果

5.兄弟组件传值

Ⅰ。采用全局事件总线 $bus（这个是咱们自己定义，可以改，不过为了和人家 Vue 对象上的方法保持一致像【$emit $on】等等，所以命名为 $bus）。之前一定有小伙伴听说过，但是一定有小伙伴还是不能够理解的吧？其实全局事件总线简单来说就是利用了这样的一个关系。

VueComponent.prototype.__proto__ === Vue.prototype

起初我们需要在入口文件 main.js 中注册全局事件总线

new Vue({
  router,
  render: (h) => h(App),
  beforeCreate() {
    // vue 原型对象上挂载一个$bus = this 指向当前 vue 实例对象
    Vue.prototype.$bus = this;
  },
}).$mount("#app");

未完，更新中…

April_zk

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【全网最全】Vue 组件之间的传值

【在开始之前使用到的三个组件在这里做一个简单的展示】1.爷组件2.父组件3.孙组件4.公共样式库 comment.css运行效果如下：父组件向子组件传值主要使用到了 v-bind 【简写“:”】指令和 props 选项（option），比如现在我们将 msg:"儿砸" 传递给子组件，并在子组件中进行一个展示。1.父组件2.子组件效果：Ⅰ。利用【父组件向子组件传值，向子组件传递一个函数】假设我们传递的消息是 msg:"爸比"，其中 sendFunction 就是父组件传递给
复制链接

扫一扫