vue parent（vue 父子组件传值方法总结（六种方法））
本文目录
- vue 父子组件传值方法总结（六种方法）
- vue中 $parent 的使用
- vue 自定义组件（二） $parent、$children、ref、refs
- vue 自定义组件之父子组件
- vue中子组件使用this.$parent获取父组件的值和方法 如果有多个父组件怎么办
vue 父子组件传值方法总结（六种方法）
1.props
子组件:
props:
父组件:
2.$parent
子组件接收:
this.$parents.msg//这个msg是父组件的msg
3.依赖注入
通过父组件提供给后代组件曝露的属性和方法
父组件:
data(){
return{
name:"父亲的名字"
}
},
provide:function(){
return{
getName:this.name
}
}
子组件接收:
inject:
1.emit
自定义事件
子组件《child》:
this.$emit("increment","我是子组件")//increment: 随便自定义的事件名称 第二个参数是传值的数据
父组件《Father》:
methods:{
f1(data){
console.log(data)//打印"我是子组件"
}
}
2.ref
子组件 《Child》:
data(){
return{
name:"我是子组件"
}
}
父组件 《Father》:
methods:{
this.$refs.child_id.name //这个name是子组件的name
}
3.终极方法
使用状态管理工具,例如Vuex
vue中 $parent 的使用
$parent层叠可以一层一层地往上追溯各级父组件，可以调用父组件的方法跟 $emit()方法 雷同
找离他最近的函数或方法
$emit（‘父组件监听的名称’）
refresh 子组件的方法
@refResh=’调用刷新的页面的函数’
调用函数重新加载页面
emit 关闭弹窗 parent 关闭弹窗
父组件必须 。sync接收
父组件接收
vue 自定义组件（二） $parent、$children、ref、refs
第三方组件官网
Element-ui
iView
Vant
如果父类组件需要直接获取子类的方法 可以使用 $children
子获父 $parent 子获取跟组件 $root
如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 《slot》《/slot》 ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示
我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3
我们把vue实例当作根组件（父组件）
父跟子的关系
通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值
我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值
父组件获取子组件的值，我们用 $children 来获取，
$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件
如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：
如下:backhand_index_pointing_down:：
通常情况下，页面的结构是可能随时调整的，这个时候我们使用 $children 来获取子组件的数据，数据可能是不准确的，这个时候 我们就会在子组件的行类添加 ref 属性
ref 绑定的就是名称
这个时候我们用 $refs. 来获取子组件的值，这个时候返回的是一个对象，对象的值是一 一对应的，这样就不怕页面调整，也不会出现数据的错误
vue 自定义组件之父子组件
html标签中使用的组件在使用插槽后互相之间可以嵌套，被嵌套的称为嵌套的子组件，嵌套的叫父组件，所有的组件都有一个根组件即vue实例管理的容器。
使用 $parent 获取父组件的实例。
可以在控制台看到父组件的vue实例
当组件嵌套比较深，而又需要最外层组件的数据时，可以通过 $parent.$parent...... $parent 一层一层父类往上至根目录，
或者使用 $root 直接获取根组件
使用 $children 获取所有子组件实例。
可在控制台看见根据组件在页面中的顺序返回的所有子组件组成的数组
要使用子组件的值时可使用此方法，用下标选择需要的子组件。
因为使用 $children 获取的数组里顺序是按是在页面中使用的顺序来排序的，当有的业务不确定使用顺序，并且还要使用子组件的值的时候，就需要按 ref 标识来获取子组件。
在使用子自定义组件时，给组件标签添加一个 ref 属性，然后就可以通过 $refs 返回拥有ref属性的组件：
在控制台可以看见获取到的子组件数组：
因为返回的是对象，所以可以通过ref值来操作子组件的值。
vue中子组件使用this.$parent获取父组件的值和方法 如果有多个父组件怎么办
亲生父亲只可能有一个的，不能有多个，程序中也一样，某个子组件的父组件也只可能有一个。你“这个子组件可能在多个父组件里面都存在”的说法本身就是错误的，在其他父组件里的子组件，即使与“这个子组件”完全一样， 那它也是另一个组件啊，不是“这个子组件”，所以这个观念你首先应该搞清楚。其实就和现实生活中一样，“你”只能有一个，“你的父亲”也只能有一个。
所以正确的说法应该是“分别获取多个具有相同特征的子组件的父组件”，这个可以通过循环来解决，具体要看过你的完整代码才知道
更多文章：
2025年10月27日 17:00
2026年3月3日 10:45
illustrator举例说明（illustrator选择工具和直接选择工具有什么不同啊）
2026年4月3日 07:30
2026年5月4日 19:15
结构体类型名称是什么（什么是结构体类型C语言中结构体类型占几个字节）
2026年1月27日 07:15
2026年1月17日 09:15
2025年11月5日 04:45
css高度自适应（CSS3如何固定图片宽度使图片高度按图片比例自适应）
2025年9月3日 02:45
mapreduce的实现原理（Hadoop技术内幕的内容介绍）
2025年11月16日 03:30
culture shock阅读理解（你好，完形填空I understand culture shock, i’ve been答案你有了吗）
2025年10月15日 21:45
private owner（求一篇 关于国外二手车交易现状的英文文章）
2025年6月10日 08:15
bool类型几个字节（C++定义bool类型的最小存储空间是多大）
2025年7月5日 02:15
2025年7月13日 09:00
手机号码的正则表达式（求国际手机号码完整正则表达式，哪位大侠有）
2026年6月1日 11:30
illustrator怎么记住（illustrator中释放到图层和粘贴时记住图层是什么意思）
2026年1月16日 13:15
2025年9月2日 17:15
2025年5月25日 09:45
2026年7月14日 23:15
2025年11月7日 04:45
