Vue父子组件的通信
前言
父传子:通过props向子组件传递数据
子传父:通过事件向父组件发送消息(子组件用 $emit()
来触发事件 ,父组件用 v-on
来 监听子组件的事件 。)
创建一个父组件,命名为Parent.vue
创建一个子组件,命名为Children.vue
父传子
子组件接受到父组件的数据并显示
子传父
步骤:
第一步:自定义事件
第二步:在子组件中用$emit触发事件。第一个参数是事件名,后边的参数是要传递的数据
第三步:在自定义事件中用一个参数来接收
Vue父子组件的访问方式
前言
父组件访问子组件:$children或$refs
子组件访问父组件:$parent
父访子
父组件(Parent.vue)中定义一个点击事件viewChildren
子组件(Children.vue)
通过$children属性获取子组件的属性或方法
$children的缺陷:子组件的下标值不是恒定不变,所以在实际开发中一般都使用$refs
在使用组件的时候定义一个属性ref,并指定对应的名称
通过$refs属性获取对应子组件的信息
子访父
子组件(Children.vue)定义一个点击事件viewParent
通过$refs属性获取对应父组件的信息
在实际的开发中$parent的使用比较少,因为父组件的信息不是一层不变。