vue ref属性_Vue父子组件

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的使用比较少，因为父组件的信息不是一层不变。