当前位置：首页 > article >正文

vue系列==vue组件

article 2024/11/5 1:59:52

vue系列==vue组件

1、组件样式控制

1.1全局样式控制

1.2局部样式控制

1.3深度样式控制

2、组件通信

2.1组件父与子之间的通信props

2.1.1简单数组接收模式

2.1.2简单对象和复杂对象接受模式

2.2 组件通信之ref与defineExpose

ref 的作用

defineExpose 的作用

运用 ref 和 defineExpose 的场景

ref

defineExpose

2.3组件通信之emits与defineEmits

3、内置组件

3.1内置组件Component

3.2内置组件之Teleport

1、组件样式控制

1、Vue组件文件中可以缺少script、template、style中的任意一个部分，程序不会报任何错误。

2、

1.1全局样式控制

1、在组件中定义的样式，默认是全局有效的。也就是说，其可以作用于当前组件中的标签、子组件的根标签及外部的标签。

2、组件样式是全局有效的，无论是在哪个组件上设置，作用都是全局的

3、

1.2局部样式控制

1、只需在style标签中添加scoped属性即可，这也就是我们常说的局部作用域样式。

1.3深度样式控制

1、如何能让组件的局部样式（也就是局部作用域样式）影响子组件的子标签呢？这就需要使用Vue提供的深度作用域选择器来实现。代码其实很简单，只需要将需要进行深度选择的标签用“：deep（）”来包含，它就能匹配并影响子组件的子标签。

2、组件通信

2.1组件父与子之间的通信props

1、父与子可以通过props属性传递的方式实现交互，其中分为简单数组接收、简单对象接收和复杂对象接收3种模式

2、

2.1.1简单数组接收模式

1、从父组件的设置与传递属性到子组件的接收与使用属性的整个过程可以划分成两个部分

2、利用defineProps即可实现属性的接收，因为有多个属性，所以可以利用数组接收属性

3、先将数据中转，然后获取。比如在子组件中声明一个ref响应式数据update，将其初始值设置为defineProps接收的count属性值，在increase函数中通过“update.value++”进行累加处理，并在模板中进行渲染，实现代码如下

4、 :msg="message", 冒号表示将变量绑定到组件的属性上，这样就可以在组件中使用。如果你只是想传递一个固定的值，无论是数字还是字符串，使用:propName="value"是完全可以的。如果你想要传递一个响应式数据，确保你在父组件中定义了响应式数据，并且使用:propName="reactiveData"进行绑定。一般传递静态常量不需要用冒号，如：msg="Hello Vue 3.0"。

5、如果想要传递静态值，固定的值，那么就不要加冒号，不然需要加冒号传递给子组件通信


  <TestCountSon :count="99" :msg="message" />
  <TestCountSon count="99" msg="Hello Vue 3.0sdfasfasdf" />
<script setup>

  // 接受父组件传递的props
  import {ref} from "vue";
  const props = defineProps(['count', 'msg'])

  // 声名响应数据
  const count = ref(props.count)
  const msg = ref(props.msg)
  // 监听父组件传递的props变化

  const increase = () => {
    count.value += 1
    msg.value = "增加数据"
  }


</script>

<template>

  <div>{{msg}}</div>
  <div>{{count}}</div>
  <button @click="increase">增加数据</button>

</template>

2.1.2简单对象和复杂对象接受模式

1、利用defineProps复杂对象接收模式进行优化。将count属性设置为对象类型，其属性值主要包括type（数据类型）、default（默认值）、required（是否必须传递）、validator（自定义校验规则）4个部分。

2、在Vue中，如果属性校验失败，它通常只会在开发模式下在控制台输出一个警告。这是为了帮助开发者发现潜在的问题，并不会阻止组件的渲染或执行。

3、
仅用于开发阶段：在开发环境中，如果属性值没有通过校验，Vue会在控制台输出警告。在生产环境中，为了性能考虑，这些校验通常会被移除。

不会阻止渲染：即使校验失败，组件仍然会渲染，并且使用那个无效的属性值。Vue的设计哲学是尽可能保持灵活性和非侵入性，因此不会因为属性校验失败而阻止组件的渲染。
这些复杂的对象模型只是适用于开发阶段，即使错误了还是会一样执行的
  // const props = defineProps(['count', 'msg'])
  // 简单对象接受模式
  // const props = defineProps({count: Number, msg: String})
  // 复杂对象接受模式
  const props = defineProps({
    count: {
      type: Number,
      required: true,
      default: 6,
      validator: (value) => {
        if (value < 10)
          return value
        else
          return 9
      }
    },
    msg: { type: String, default: '默认值' }
  })

2.2 组件通信之ref与defineExpose

ref 的作用

直接访问DOM元素：通过 ref 可以直接访问组件模板中的DOM元素，从而进行操作，比如获取元素尺寸、聚焦等。

访问组件实例：在父组件中，可以通过 ref 引用子组件实例，进而访问子组件的公开属性和方法。

defineExpose 的作用

暴露组件内部状态：子组件可以使用 defineExpose 显式地暴露其内部状态（如响应式数据、方法等），使得父组件能够通过 ref 访问这些状态。

运用 ref 和 defineExpose 的场景

父组件控制子组件：当父组件需要直接控制或查询子组件的状态时，比如动态修改子组件的数据，或者调用子组件的方法。

表单验证：在表单组件中，父组件可能需要检查子组件（如输入框）的验证状态。

焦点管理：在复杂的表单或交互式应用中，可能需要从父组件控制子组件的焦点。

组件通信：当使用事件发射（emit）不太合适或者过于复杂时，比如需要传递多个状态或方法，使用 ref 和 defineExpose 可以简化通信。

在Vue 3中，ref 和 defineExpose 是组件通信的两种方式，它们通常一起使用来允许父组件访问子组件的属性或方法。

ref

ref 是Vue 3中的一个功能，用于创建一个响应式的引用，可以用来引用DOM元素或组件实例。当你在父组件中使用 ref 来引用一个子组件时，你可以通过这个引用直接访问子组件的实例。

defineExpose

defineExpose 是一个Vue 3的API，它允许你在子组件中显式地暴露属性和方法，这样父组件就可以通过 ref 访问它们。默认情况下，子组件的所有属性和方法都是私有的，不会暴露给父组件。
<script setup>

  // 接受父组件传递的props
  import {ref} from "vue";
  const msg = ref("asdfasdfasf");
  // 修改msg的值
  // 定义了一个changeMsg方法，修改msg的值
  const changeMsg = () => {
    msg.value = "Hello Worasdfasdfasfld";
  }
  //暴露给父组件的接口
  defineExpose({
    msg,
    changeMsg
  })

</script>
  // 父组件调用子组件的方法
  const dddd = ref(null)
  function changedddd() {
    dddd.value.changeMsg()
  }


</script>

<template>
  <div > {{count}}</div>
  <button @click="changeCount">Change Count</button>
  <TestCountSon  ref="dddd" />

  <div>这是父内容</div>
  <button @click="changedddd">Change Count</button>

</template>

2.3组件通信之emits与defineEmits

1、

3、内置组件

1、内置组件之Component

2、

3.1内置组件Component

1、Component组件可以用来当作tab选项卡内容的方面，

3.2内置组件之Teleport

1、根据4.1节所学内容可以得知，Vue项目中的所有组件都被包含在App这一根组件下，而在入口文件main.js中引入根组件App后会将其挂载于“＃app”网页元素上，这就意味着Vue项目中的所有组件元素都被包含在“＃app”网页元素中。假如现在有一个需求：在网页的顶层显示一个模态框。如果可以实现模态框元素直接包含在body标签中，让该元素和“＃app”网页元素同级并列，那么控制结果会变得简单，此时就可以使用具有移动功能的内置组件Teleport来实现

查看全文

http://www.kler.cn/a/379492.html