vue3组件初步了解组件传值

初步了解vue3组件传值

---

API两种 对比

vue的组件两种不同风格的写法 : 选项式API和组合式API
我们应该很熟悉选项式API ，这是vue2我们常用到的

1. 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2. 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 setup 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，script setup 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 改造后和上面的模板完全一样的组件：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

所以我们用组合式开发的写法开发下面的内容

引入组件 使用props和emit方法

1. 相对于vue2 更加简介了
   useMouse就是自己写的子组件 然后引入到父组件使用

父组件

<useMouse :msg="title" >

<script setup>
import { useMouse } from './mouse.js'
</script>

2. 引入组件还需要传递两者之间的值
   最基本的数据绑定形式是文本插值

<span>Message: {{ msg }}</span>

传递的文本插入

想把父组建的title传到子组件中去

props.传递的值
<span>Message: {{ Props.msg }}</span>

下面需要有接收父组件的title的值
const props= defineProps({ title:string });

3. 关闭窗口传递传递父组件
   使用setup函数 和组合式API处理，要让组件通过emit告诉父组件关闭窗口的指令

子组件

<buttin @click="closeDialog">关闭</button>

<script setup>
import { ref defineEmits } from 'vue'
//传递父组件
const emit = defineEmits({'update: showVisible '});
//关闭事件
const closeDialog = () ={
emit('update: showVisible ' ,false);

父组件

<template>
   <Dialog v-mode:showVisible="showMainVisible">
</template>

<script setup>
import 子组件 from ‘路径';
//默认界面弹窗关闭
const showMainVisible = ref(fasle);
</script>

其中子组件更新emit 与父组件中绑定的属性相匹配
并使用v:model:showvisible 来双向绑定，这样的话子组件就可以正常关闭了

好的就介绍到这里 下期再见