之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客

一、父传子（prop）

第一步：在父组件中定义数据，例：tohome

 data () {return {tohome:"给home组件传值",}},

第二步：在<v-home>上绑定个属性，例:title

<v-home :title="tohome"></v-home>

第三步：子组件利用props接收父组件的传值

 方法一 props:{'title':String,'bool':Boolean,'getFun':Function},方法二 props:['title','bool','getFun','parent']

第四步：在子组件上绑定传过来的数据

<p>{{title}}</p>

二、子传父（$meit）

子组件

<template><div><span>我是子组件</span><button @click="btnClick">点击后给父组件传参</button></div>
</template><script>
export default {data(){return {aa:'我是子组件上的信息'}},methods:{btnClick(){          this.$emit('itemfun',this.aa)}}
}
</script>

父组件

<template><div><span>我是父组件</span><v-home @itemfun='getapp'></v-home><span>{{data}}</span></div>
</template><script>
import home from '../../home'
export default {components:{'v-home':home},data(){return {data:''}},methods:{// 获取子组件填写好的值getapp(val){this.data=val}}
}
</script>

注:如果子组件没有点击事件给父组件传参，可以使用watch监听

子组件

<template><div><span>我是子组件</span></div>
</template><script>
export default {data(){return {aa:''}},// 监听父组件有没有获取到值watch: {aa: {handler (n, o) {this.$emit('itemfun', n);},deep: true}},mounted(){this.aa="我是子组件上的信息"},
}
</script>

父组件的内容和上面一样

三、$refs

在父组件使用this.$refs可以获取到子组件的所有方法和数据

//子组件
<template><div><span>我是子组件</span></div>
</template><script>
export default {data(){return {}}}
</script>//父组件
<template><div><span>我是父组件</span><v-home ref="refHome"></v-home></div>
</template><script>
import home from '../../home'
export default {components:{'v-home':home},data(){return {data:''}},mounted(){console.log(this.$refs)  //在父组件输出,可以直接获取home组件的所有数据和方法}
}
</script>

运行结果

四、$parent / $children

注：this就指向Vue实例，所以，this.$parent就是这个页面的父组件；同样的this.$children就是这个页面的子组件；

所以，如果当前在父组件，可以通过this.$children访问子组件的所有数据和方法；如果当前在子组件，可以通过this.$parent访问父组件的所有数据和方法；

如果在子组件1想访问子组件2的所有方法和数据，可以通过this.$parent.$refs也可以通过this.$parent.$children

其实还有很多方法，例如作用域插槽等。可以参考这个文章

Vue组件之间的传参方式小总结_三七安的博客-CSDN博客_vue组件间的参数传递

vue组件之间的传参总结相关推荐

Vue组件之间的传参方式小总结
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
vue组件之间的传值的几种方法
vue组件之间传值的几种方法总结一.父传子父传子技术就是把父组件中的数据传给子元素调用,用到的方法是 1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ,语法是 :属性名 (冒号加属性名) ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
【Vue】路由Router传参的两种方式（详解）
本文我们来介绍一下Vue中的路由传参问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> & ...
vue模块给模块传参_Vue店面的Paypal支付模块
vue模块给模块传参 Vue店面PayPal付款扩展 (Vue Storefront PayPal Payment Extension) PayPal Payment module for vue-s ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...

vue组件之间的传参总结

一、父传子（prop）

二、子传父（$meit）

三、$refs

四、$parent / $children

vue组件之间的传参总结相关推荐

最新文章

热门文章