[vue3]组件通信

自定义属性

父组件中给子组件绑定属性, 传递数据给子组件, 子组件通过props选项接收数据

props传递的数据, 在模版中可以直接使用{{ message }}, 在逻辑中使用props.message

defineProps

defineProps是编译器宏函数, 就是一个编译阶段的标识, 实际编译器解析时, 遇到后会进行编译转换

自定义事件

父组件中给子组件标签绑定自定义事件, 子组件通过emit方法触发事件, 传递数据给父组件

模版引用

通过ref标识获取真实的DOM对象或者组件实例对象, 叫做模版引用

获取DOM对象

import {ref} from 'vue'
//1,生成一个ref对象 
const inp = ref(null)
//2,绑定ref标识
<input ref='inp' />
//3,访问ref对象
onMounted(() => {
  注意: 操作DOM需要组件完毕
  console.log(inp.value)
})

获取组件实例

import {ref} from 'vue'
const sun = ref(null)
onMounted(() => {
  // 注意: 组件挂载完毕
  // 获取组件属性
  console.log(sun.value.属性)
  // 调用组件方法
  console.log(sun.value.方法())
})
<sun ref="sun"><sun>

defineExpose

setup语法糖下组件内部的属性和方法是不开放的, 需要通过defineExpose编译宏暴漏组件的属性和方法

provide()和inject()

可以方便的跨层级传递数据和方法

场景

1.0传递普通数据

顶层组件通过provide函数提供数据, 底层组件通过inject函数获取数据

2.0传递响应式数据

3.0传递方法

顶层组件可以向底层组件传递方法, 底层组件调用顶层组件的方法, 就可以实现修改数据

defineModel

在vue3中, 自定义组件上使用v-model. 相当于传递modelValue属性, 触发 update:modelValue 事件

先要定义props, 再定义emits, 其中有许多重复代码,如果修改值, 还需要手动调用emit函数

<Child v-model="text">
等同于
<Child :modelValue="text"  @update:modelValue=" text = $event " >

defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
  
<input
  type="text"
  :value="modelValue"
  @input="e => emit('update:modelValue', e.target.value)"  
>

defineModel

使用新的函数(实验阶段)简化代码

<Child v-model="text">

import {defineModel} from 'vue'
const modelValue = defineModel()
  
<input
  type="text"
  :value="modelValue"
  @input="modelValue = e.target.value"  
>

export default defineConfig({
  plugins: [
    vue({
      script: {
        // 开启支持
        defineModel: true
      }
    }),
  ],
})

全局变量

vue2

设置

语法: Vue.prototype.属性名 = 属性值

Vue.prototype.$echarts = echarts

读取

语法: this.属性名

<template> 
  this.$echarts.init()
</script>

vue3

设置

语法: app.config.globalProperties.属性名 = 属性值

import { createApp } from 'vue'; 
import App from './App.vue'; 
const app = createApp(App); 
// 假设您已经验证了 URL 结构并确定要提取的部分 
const path = window.location.href.split("/")[5] || 'default-path'; 
app.config.globalProperties.$path = path; 
app.mount('#app');

读取

语法: const 变量 = getCurrentInstance()?.appContext.config.globalProperties.属性名

<template> 
  <div>当前路径是：{{ path }}</div> 
</template> 
  
<script>
import { getCurrentInstance, ref, onMounted } from 'vue'; 
export default { 
  setup() { 
    const path = ref(null); 
    onMounted(() => { 
      const instance = getCurrentInstance(); 
      if (instance) { 
        path.value = instance.appContext.config.globalProperties.$path;
      } 
    });
    return { path }; 
  }, 
}; 
</script>