vue3中的组件通信【1】《父子组件通信》

文章目录

    • 父子组件通信
    • (1)props / emits
        • ①props
        • 使用props
        • 获取非 Prop 的 Attribute
        • emits(子传父)
    • (2)v-model / emits
    • (3)ref / emits

父子组件通信

vue3中的组件通信【1】《父子组件通信》_第1张图片

(1)props / emits

①props

Father.vue

<template>
  <Child
    title="用户信息"
    :index="1"
    :uid="userInfo.id"
    :user-name="userInfo.name"
  />
</template>

<script>
import { defineComponent } from 'vue'
import Child from '@cp/Child.vue'

interface Member {
  id: number,
  name: string
};

export default defineComponent({
  // 需要启用子组件作为模板
  components: {
    Child
  },

  // 定义一些数据并return给template用
  setup () {
    const userInfo: Member = {
      id: 1,
      name: 'Petter'
    }

    // 不要忘记return,否则template拿不到数据
    return {
      userInfo
    }
  }
})
</script>

Child.vue

export default defineComponent({
  props: [
    'title',
    'index',
    'userName',
    'uid'
  ]
})

加上类型限制:

export default defineComponent({
  props: {
    title: String,
    index: Number,
    userName: String,
    uid: Number
  }
})

vue3中的组件通信【1】《父子组件通信》_第2张图片
如果你需要对某个 prop 允许多类型,比如这个 uid 字段,它可能是数值,也可能是字符串,那么可以在类型这里,使用一个数组,把允许的类型都加进去。

export default defineComponent({
  props: {
    // 单类型
    title: String,
    index: Number,
    userName: String,

    // 这里使用了多种类型
    uid: [ Number, String ]
  }
})

对部分字段设置为可选,并提供默认值:

export default defineComponent({
  props: {
    // 可选,并提供默认值
    title: {
      type: String,
      required: false,
      default: '默认标题'
    },

    // 默认可选,单类型
    index: Number,

    // 添加一些自定义校验
    userName: {
      type: String,

      // 在这里校验用户名必须至少3个字
      validator: v => v.length >= 3
    },

    // 默认可选,但允许多种类型
    uid: [ Number, String ]
  }
})

vue3中的组件通信【1】《父子组件通信》_第3张图片

使用props

template 部分

<template>
  <p>标题:{{ title }}</p>
  <p>索引:{{ index }}</p>
  <p>用户id:{{ uid }}</p>
  <p>用户名:{{ userName }}</p>
</template>

script 部分

export default defineComponent({
  props: {
    title: String,
    index: Number,
    userName: String,
    uid: Number
  },

  // 在这里需要添加一个入参
  setup (props) {

    // 该入参包含了我们定义的所有props
    console.log(props);

  }
})

获取非 Prop 的 Attribute

在 Child.vue 里,可以通过 setup 的第二个参数 context 里的 attrs 来获取到这些属性。

export default defineComponent({
  setup (props, { attrs }) {
    // attrs 是个对象,每个 Attribute 都是它的 key
    console.log(attrs.class);

    // 如果传下来的 Attribute 带有短横线,需要通过这种方式获取
    console.log(attrs['data-hash']);
  }
})

emits(子传父)

Child.vue 绑定一个更新用户年龄的方法,那么在 Father.vue 里需要这么处理:

<template>
  <Child
    @update-age="updateAge"
  />
</template>
<script>
import { defineComponent, reactive } from 'vue'
import Child from '@cp/Child.vue'

interface Member {
  id: number,
  name: string,
  age: number
};

export default defineComponent({
  components: {
    Child
  },
  setup () {
    const userInfo: Member = reactive({
      id: 1,
      name: 'Petter',
      age: 0
    })

    // 定义一个更新年龄的方法
    const updateAge = (age: number): void => {
      userInfo.age = age;
    }

    return {
      userInfo,

      // return给template用
      updateAge
    }
  }
})
</script>

动态绑定 props 是用 :,绑定 emit 是用 @

Child.vue

export default defineComponent({
  emits: [
    'update-age'
  ]
})

接收 emits 时做一些校验
比如上面的更新年龄,只允许达到成年人的年龄才会去更新父组件的数据:

export default defineComponent({
  emits: {
    // 需要校验
    'update-age': (age: number) => {
      // 写一些条件拦截,记得返回false
      if ( age < 18 ) {
        console.log('未成年人不允许参与');
        return false;
      }

      // 通过则返回true
      return true;
    },

    // 一些无需校验的,设置为null即可
    'update-name': null
  }
})

调用 emits

export default defineComponent({
  emits: [
    'update-age'
  ],
  setup (props, { emit }) {
    
    // 2s 后更新年龄
    setTimeout( () => {
      emit('update-age', 22);
    }, 2000);

  }
})

(2)v-model / emits

  1. 在 Father.vue ,通过 v-model 向 Child.vue 传值
  2. Child.vue 通过自身设定的 emits 向 Father.vue 通知数据更新

Father.vue

<template>
  <Child
    v-model:user-name="userInfo.name"
  />
</template>

如果你要绑定多个数据,写多个 v-model 即可

<template>
  <Child
    v-model:user-name="userInfo.name"
    v-model:uid="userInfo.id"
  />
</template>

看到这里应该能明白了,一个 v-model 其实就是一个 prop,它支持的数据类型,和 prop 是一样的。

所以,子组件在接收数据的时候,完全按照 props 去定义就可以了。

export default defineComponent({
  props: [
    'title',
    'index',
    'userName',
    'uid'
  ]
})

Child.vue

虽然 v-model 的配置和 prop 相似,但是为什么出这么两个相似的东西?自然是为了简化一些开发上的操作。

使用 props / emits,如果要更新父组件的数据,还需要在父组件定义好方法,然后 return 给 template 去绑定事件给子组件,才能够更新。

而使用 v-model / emits ,无需如此,可以在 Child.vue 直接通过 “update:属性名” 的格式,直接定义一个更新事件:

export default defineComponent({
  props: {
    userName: String,
    uid: Number
  },
  emits: [
    'update:userName',
    'update:uid'
  ]
})

调用自身的 emits
在 Child.vue 配置好 emits 之后,就可以在 setup 里直接操作数据的更新了:

export default defineComponent({
  // ...
  setup (props, { emit }) {

    // 2s 后更新用户名
    setTimeout(() => {
      emit('update:userName', 'Tom')
    }, 2000);

  }
})

(3)ref / emits

在学习 响应式 API 之 ref 的时候,我们了解到 ref 是可以用在 DOM 元素与子组件 上面。

所以,父组件也可以直接通过对子组件绑定 ref 属性,然后通过 ref 变量去操作子组件的数据或者调用里面的方法。

比如导入了一个 Child.vue 作为子组件,需要在 template 处给子组件标签绑定 ref:

<template>
  <Child ref="child" />
</template>

然后在 script 部分定义好对应的变量名称(记得要 return 出来):

import { defineComponent, onMounted, ref } from 'vue'
import Child from '@cp/Child.vue'

export default defineComponent({
  components: {
    Child
  },
  setup () {
    // 给子组件定义一个ref变量
    const child = ref<HTMLElement>(null);

    // 请保证视图渲染完毕后再执行操作
    onMounted( () => {
      // 执行子组件里面的ajax函数
      child.value.getList();

      // 打开子组件里面的弹窗
      child.value.isShowDialog = true;
    });

    // 必须return出去才可以给到template使用
    return {
      child
    }
  }
})

子组件如果想主动向父组件通讯,也需要使用 emit

你可能感兴趣的:(vue,vue.js,javascript,前端)