vue 组件间传值的几种方式

最新推荐文章于 2024-08-08 17:23:21 发布
最新推荐文章于 2024-08-08 17:23:21 发布
阅读量670 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxue_123/article/details/109848308
版权

vue组件传值有好几种方式

1.父传子     可以通过子组件props暴露属性   ,然后在父组件中用

son.vue

<template>
  <div class="son">
    <h2>子组件</h2>
    {{ sonMsg }}
  </div>
</template>
<script>
export default {
  props: {
    sonMsg: {
      type: String,
      default: "今天阳光明媚",
    },
  },
};
</script>
<style lang="less" scoped>
.son {
  width: 300px;
  height: 200px;
  background-color: #eee;
}
</style>

  father.vue

<template>
  <div class="father">
    <h1>父组件</h1>
    <son sonMsg="天气有点不好"></son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.father {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin: 50px auto;
}
</style>

效果:

2.子传父   可以通过在子组件定义$emit方法  ,然后去父组件用    this.$emit("方法名",值);

son.vue

<template>
  <div class="son">
    <h2>子组件</h2>
    {{ sonMsg }}
    <button @click="sure">点击</button>
  </div>
</template>
<script>
export default {
  props: {
    sonMsg: {
      type: String,
      default: "今天阳光明媚",
    },
  },
  methods: {
    sure() {
      //   向父组件传递值  mTest方法
      this.$emit("mTest", "还有很多事要做");
    },
  },
};
</script>
<style lang="less" scoped>
.son {
  width: 300px;
  height: 200px;
  background-color: #eee;
}
</style>

father.vue      (拿到子组件中的mTest方法,值就是子组件方法中的参数

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>{{ hText }}</p>
    <son sonMsg="天气有点不好" @mTest="even"></son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      hText: "",
    };
  },
  methods: {
    even(val) {
      //   console.log(val);
      this.hText = val;
    },
  },
};
</script>
<style lang="less" scoped>
.father {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin: 50px auto;
}
</style>

效果:  点击后的效果

3.父子组件之间的联动

son.vue

<template>
  <div class="son">
    <h2>子组件</h2>
    {{ sonMsg }}
    <button @click="sure">点击</button>
    <input type="text" v-model="sonWord" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      sonWord: "换",
    };
  },
  watch: {
    sonWord: function (newValue, oldVaue) {
      this.$emit("mTest", newValue);
    },
  },
  props: {
    sonMsg: {
      type: String,
      default: "今天阳光明媚",
    },
  },
  methods: {
    sure() {
      //   向父组件传递值  mTest方法
      this.$emit("mTest", "还有很多事要做");
    },
  },
};
</script>
<style lang="less" scoped>
.son {
  width: 300px;
  height: 200px;
  background-color: #eee;
}
</style>

father.vue

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>{{ hText }}</p>
    <!-- 父子联动 -->
    <input type="text" v-model="fatherWord" />
    <son :sonMsg="fatherWord" @mTest="even"></son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      fatherWord: "天气有点不好",
      hText: "",
    };
  },
  methods: {
    even(val) {
      //   console.log(val);
      this.hText = val;
    },
  },
};
</script>
<style lang="less" scoped>
.father {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin: 50px auto;
}
</style>

4.provide 和inject实现父子传值     父组件使用provide定义变量   子组件使用inject接收变量   然后在子组件中使用

son.vue

<template>
  <div class="son">
    <h2>子组件</h2>
    {{ sonMsg }}
    <button @click="sure">点击</button>
    <input type="text" v-model="sonWord" />
    {{ msg }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      sonWord: "换",
    };
  },
  watch: {
    sonWord: function (newValue, oldVaue) {
      this.$emit("mTest", newValue);
    },
  },
  inject: ["msg"],
  props: {
    sonMsg: {
      type: String,
      default: "今天阳光明媚",
    },
  },
  methods: {
    sure() {
      //   向父组件传递值  mTest方法
      this.$emit("mTest", "还有很多事要做");
    },
  },
};
</script>
<style lang="less" scoped>
.son {
  width: 300px;
  height: 200px;
  background-color: #eee;
}
</style>

 father.vue

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>{{ hText }}</p>
    <!-- 父子联动 -->
    <input type="text" v-model="fatherWord" />
    <son :sonMsg="fatherWord" @mTest="even"></son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      fatherWord: "天气有点不好",
      hText: "",
    };
  },
  provide: {
    msg: "12345aaa",
  },
  methods: {
    even(val) {
      //   console.log(val);
      this.hText = val;
    },
  },
};
</script>
<style lang="less" scoped>
.father {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin: 50px auto;
}
</style>

5.通过插槽传值     子组件定义 <slot text="aaaaa"></slot>    父组件中使用

 <son :sonMsg="fatherWord" @mTest="even">

      <!-- <h2>父传子的数据</h2> -->

      <template slot-scope="scope">

        {{ scope.text }}

      </template>

    </son>

son.vue

<template>
  <div class="son">
    <h2>子组件</h2>
    {{ sonMsg }}
    <button @click="sure">点击</button>
    <input type="text" v-model="sonWord" />
    {{ msg }}
    <slot text="aaaaa"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sonWord: "换",
    };
  },
  watch: {
    sonWord: function (newValue, oldVaue) {
      this.$emit("mTest", newValue);
    },
  },
  inject: ["msg"],
  props: {
    sonMsg: {
      type: String,
      default: "今天阳光明媚",
    },
  },
  methods: {
    sure() {
      //   向父组件传递值  mTest方法
      this.$emit("mTest", "还有很多事要做");
    },
  },
};
</script>
<style lang="less" scoped>
.son {
  width: 300px;
  height: 200px;
  background-color: #eee;
}
</style>

father.vue

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>{{ hText }}</p>
    <!-- 父子联动 -->
    <input type="text" v-model="fatherWord" />
    <son :sonMsg="fatherWord" @mTest="even">
      <!-- <h2>父传子的数据</h2> -->
      <template slot-scope="scope">
        {{ scope.text }}
      </template>
    </son>
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      fatherWord: "天气有点不好",
      hText: "",
    };
  },
  provide: {
    msg: "12345aaa",
  },
  methods: {
    even(val) {
      //   console.log(val);
      this.hText = val;
    },
  },
};
</script>
<style lang="less" scoped>
.father {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin: 50px auto;
}
</style>

 

chengxue_123
关注
专栏目录
vue组件传值的12种方式
郊眠寺
10-08 220
含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
详解vuejs几种不同组件（页面）间传值的方式
12-12
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。 一、路由传值 路由对象如下图所示： 在跳转页面的时候，在js代码中的操作如下，在标签中使用标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。 这样使用
Vue组件之间常见的三种传值方式
lh9456的博客
04-23 1461
Vue组件之间的传值方式 父传子 方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。具体可参考官方文档。 子传父 方法：子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。 非父与子之间的传值 第一种：eventbus Event B...
Vue 3 中，组件间传值有多种方式
最新发布
weixin_39277183的博客
08-08 1506
在 Vue 3 中，组件间传值有多种方式，以下是几种常见的方式
vue 组件之间相互传值的6种方法
一步一个脚印，踏实努力，向着目标前进
01-28 1万+
优点实现了数据从子组件向父组件的传递，遵循响应式设计原则。缺点只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。
vue组件间的5种传值方式
qsj0606的博客
07-30 958
父组件向子组件传值： 比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步： 父组件 Father.vue 内容，注意里面的操作步骤： <template> <div> <h2>父组件区域</h2> <hr /> <!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量--> <Children :num="n
Vue 组件传值几种常用方法【总结】
08-27
今天，我们将总结 Vue 组件传值的几种常用方法，希望能够对大家有所帮助。 通过路由带参数传值 在 Vue 中，我们可以通过路由带参数来传递数据。例如，我们可以在 A 组件中使用 `this.$router.push` 方法来传递参数...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
12-09
如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue...
Vue组件间传值的几种方式
qq_43569680的博客
06-04 330
Vue组件间传值的几种方式 注意：在vue里面的一些固定参数使用的时候都需要加上一个$符号 父子组件之间传值方式一：props / $emit 1.props里接收父组件传递过来的数据，在父组件中使用v-bind绑定属性 例如： //加上单引号表示字符串 v-bind:msg="'from parent'" //没有v-bind就表示只是字符串 msg = 'from parent' //parent会被默认为变量，如果想把它变成字符串需要加上引号 ：msg = 'parent
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue组件通讯有哪几种形式？
Hello_Jay66的博客
03-05 368
vue组件通讯大致有三种：父传子，子传父，还有兄弟之间通讯。 第一种：父传子：主要通过props来实现的 具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收。 第二种：子传父：主要通过$emit...
Vue 组件之间的三种传值方式
qitiandada的博客
01-17 207
Vue组件之间的传值方式，一般分为三种，父给子传值， 兄弟之间传值， 子给父传值。 父给子传值 顾名思义， 父给子传值，就是组件之间有嵌套关系，是包含的传给被包含的 在 ‘父亲’ 中的操作 传给 ‘子’ big 和 se <子组件标签 se='red' big='20px'></子组件标签> 在 ‘子’ 中的操作 接收 ‘父’ 传过来的 big 和 se &l...
vue组件之间的三种传值方式
weixin_30772261的博客
07-08 180
一、父组件向子组件传值 首先父组件发送的形式是用bind绑定值到子组件身上，然后子组件数props属性接收 <body> <div id="app"> <!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <co...
vue组件间的传值方式
h1103280009的博客
12-27 125
作为一个vue的入门者，写此博文用于记录与学习，希望和我一样作为vue小白的可以有所帮助。 #父组件给子组件传值
vue 组件之间的传值方式
LonewoIf的博客
02-23 288
vue 组件之间的传值方式有： 1、父组件传给子组件 2、子组件传给父组件 3、非父子组件之间传值 父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 1、父组件向子组件传值： 父组件： &lt;template&gt; &lt;div&gt; &lt;input type="text" v-...
vue组件间传值方式
weixin_45369499的博客
05-20 207
前言：vue组件传值在开发中遇到的频率很高，以防遗忘，故写一篇博客记录一下。当然该篇博客并不全面，在日后再逐步补充完善… 1、prop父传子 父组件： <template> <div id="father"> <Children :byData="fatherByChildren"/> <!-- ‘:’为‘v-bind’的简写，这里使用‘v-bind’，使用传的是fatherByChildren这个对象，不使用传的是fatherByChildren这个字符
Vue组件间传值方法总结与实例
本文将重点介绍 Vue 中几种最常见的组件间传值方法，特别是针对你提供的示例，主要涉及父子组件之间的数据传递以及通过路由查询参数进行传递。 ### 父子组件传值 在 Vue 中，父子组件之间的数据传递通常有两种方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值