vue2.0中组件传值的几种方式总结
更新时间：2022年12月07日 09:38:51 作者：键.
这篇文章主要介绍了vue2.0中组件传值的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
搭建好测试环境
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<child></child>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'
export default {
name: 'App',
components: {
HelloWorld,
Child
}
}
</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>
Child.vue
````html
!<template>
<div class="Child">
<h1>这是子组件</h1>
</div>
</template>
<script>
export default {
name:'Child',
data() {
return {
}
},
}
</script>
<style>
</style>
1.方法一
父传子
父组件向子组件使用props传值
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<child :sendParam="send"></child>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'
export default {
name: 'App',
components: {
HelloWorld,
Child
},
data() {
return {
send:'父组件传给子组件的值'
}
},
}
</script>
<template>
<div class="Child">
<h1>这是子组件</h1>
<div>{{sendParam}}</div>
</div>
</template>
<script>
export default {
name:'Child',
props:['sendParam'],
data() {
return {
}
},
}
</script>
这里的props除了写成数组还可以写成对象的方式：
<script>
export default {
name:'Child',
data() {
return {
}
},
//方法一：用数组获取值
// , props:['sendParam'],
//方法二：用对象获取值
props:{
sendParam:String,
}
}
</script>
所以说在父组件给子组件传值的时候是可以传对象，布尔值,函数等，在子组件接收值的时候也可以做相应的限制或设置默认值。以对象接收时有type，default，require等参数可以设置，详细的内容可参考官网的文档。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
子传父
子组件向父组件传值需要使用自定义事件
<template>
<div class="Child">
<h1>这是子组件</h1>
<div>{{sendParam}}</div>
<button @click="run">子传父</button>
</div>
</template>
<script>
export default {
name:'Child',
data() {
return {
childata:'这是子传父的值'
}
},
props:['sendParam'],
methods: {
run(){
this.$emit('event',this.childata)
}
},
}
</script>
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<child :sendParam="send" @event="reviceChild"></child>
<div>{{revice}}</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'
export default {
name: 'App',
components: {
HelloWorld,
Child
},
data() {
return {
send:'父组件传给子组件的值',
revice:''
}
},
methods: {
reviceChild(val){
this.revice=val
}
},
}
</script>
子组件中的事件不一定要用click点击事件，还可以是各种可触发的事件，比如mouseover，dbclick等。
2.方法二
在父组件中加上一个ref属性并打印其结果
<child :sendParam="send" @event="reviceChild" ref="child"></child>
console.log(this.$refs.child);
在结果中我们发现了很多子组件Child中有的方法，数据。
结果表明，我们打印的this.$refs.child就是整个子组件，也就是说，我们可以在这里直接拿到子组件的值。父组件拿子组件的值同理。
父传子
<button @click="getParent">获取父组件的值</button>
getParent(){
console.log(this.$parent.send)
}
子传父
<child :sendParam="send" @event="reviceChild" ref="child"></child> <button @click="go">获取ref</button>
go(){
console.log(this.$refs.child.childata);
}
奇怪的传值
父组件中添加:that="this"
<child :sendParam="send" @event="reviceChild" ref="child" :that="this"></child>
子组件中props接收
props:{
sendParam:{
type:String,
default:'111'
},
that:{}
},
在生命周期中输出
mounted() {
console.log(this.that)
},
这里也可以拿到整个父组件
mounted() {
console.log(this.that.send)//子组件拿到父组件的值
},
3.方法三
vue提供了provide,inject来实现如下场景的组件传值，父组件向子组件跨级传值
父组件：
export default {
name: 'App',
components: {
HelloWorld,
Child
},
provide:{
psend:'123456'
},
}
子组件：
export default {
name:'Child',
data() {
return {
}
},
inject:['psend'],
mounted() {
console.log(this.psend);
},
}
4.兄弟组件之间传值
这里vue提供了vuex来解决该需求，这里可以查看我之前写的一篇笔记
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 项目中浏览器跨域的配置问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了在VUE style中使用data中的变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
路由这个概念最先是后端出现的,下面这篇文章主要给大家介绍了关于vue前端路由以及vue-router两种模式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下2022-06-06
uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)
我在做uniapp项目时，用的uni-file-picker组件，这是我做的一个项目实例，主要是将图片通过接口传至后台服务器，本文给大家分享uniapp组件uni-file-picker中对上传的图片进行压缩再上传，感兴趣的朋友跟随小编一起看看吧2022-11-11
这篇文章主要为大家介绍了Vue3 构建 Web Components使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue中下载文件后无法打开的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了VUE程序调试的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
Vue 2.5 Level E 已发布，在原来2.x的基础上做了很多相应改进和对 bug 的修复，目前 2.5 系列最新的版本为 2.5.2，本文给大家介绍vue 2.5 新特征，需要的朋友参考下吧2017-10-10
这篇文章主要介绍了浅谈vue权限管理实现及流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论