vue---父组件监听子组件并获取子组件的值（子组件多个值）

script：

// changeName:子组件watch的 this$emit('changeName', thisprovince)的changeName，是自定义的

// lockValue：父组件的方法名

组件通信常用方式

props

父给子传值

自定义事件

子给父传值

$emit

$bus事件总线

任意两个组件之间传值常用事件总线 或 vuex的方式。

event bus

vuex

唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。

边界情况

$parent/$root

兄弟组件之间通信可以通过共同祖辈搭桥 $parent 或$root

$children

父组件可以通过$children访问子组件实现父子通信

$refs

获取子节点引用

provide/inject

能够实现祖先和后代之间的传值

$attrs $listeners

非prop特性 ,可以包含所有父作用域的绑定（class style除外）并且可以通过v-bind=“$attrs”传入组件内部，创建高级组件时特别有用

插槽语法是vue实现的内容分发api 适合复合组件开发，在通用组件库的开发中大量使用。

匿名插槽

具名插槽

将内容分发到子组件指定位置

作用域插槽

分发内容到子组件的数据

create函数

建通知组件，Noticevue

原因是父组件请求数据时,子组件已经渲染完毕,这个时候传了一个空数组给子组件子,子组件用到父组件传过来的值而出现的报错

解决办法:

1 给子组件添加一个渲染条件,有值的时候在渲染

2 使用watch监听,数据变化时动态更新数据

3 把数据存储到vuex 读取vuex里面的数据

4 通过ref 直接给组件赋值,不过这已经是在 *** 作dom了(不建议使用)

以上就是关于vue---父组件监听子组件并获取子组件的值（子组件多个值）全部的内容，包括:vue---父组件监听子组件并获取子组件的值（子组件多个值）、vue最全的组件通信和插槽，看这一篇就够了、vue父组件异步获取数据传值给子组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！