[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>
  • 54
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3的组件通信方式和Vue2有些不同,主要是因为Vue3中使用了Composition API,其中提供了两种方式进行组件通信: 1. Props 和 Emit 这是Vue2中也存在的方式,通过在父组件中向子组件传递props,子组件通过emit事件向父组件传递信息。在Vue3中,可以使用 `defineProps` 和 `defineEmits` 来定义props和emit事件。示例: ```html <!-- Parent.vue --> <template> <Child :msg="message" @send-msg="handleMsg"></Child> </template> <script> import { defineComponent, ref } from 'vue' import Child from './Child.vue' export default defineComponent({ components: { Child }, setup() { const message = ref('Hello') const handleMsg = (msg) => { console.log(`Received message from child: ${msg}`) } return { message, handleMsg } } }) </script> <!-- Child.vue --> <template> <button @click="sendMsg">Send Message</button> </template> <script> import { defineComponent, defineEmits, propType } from 'vue' export default defineComponent({ emits: ['send-msg'], props: { msg: { type: String, required: true } }, setup(props, { emit }) { const sendMsg = () => { emit('send-msg', 'Hello from child') } return { sendMsg } } }) </script> ``` 2. Provide 和 Inject Provide和Inject是Vue3中新增的方式,可以在父组件中提供数据,让子组件中使用。Provide和Inject可以传递任何类型的数据,包括对象、数组、函数等。示例: ```html <!-- Parent.vue --> <template> <div> <h1>{{ title }}</h1> <Child /> </div> </template> <script> import { defineComponent, provide } from 'vue' import Child from './Child.vue' export default defineComponent({ components: { Child }, setup() { provide('title', 'Hello from parent') } }) </script> <!-- Child.vue --> <template> <div> <h2>{{ subtitle }}</h2> </div> </template> <script> import { defineComponent, inject } from 'vue' export default defineComponent({ setup() { const title = inject('title', 'Default title') const subtitle = 'Hello from child' return { title, subtitle } } }) </script> ``` 以上是两种Vue3中常用的组件通信方式,具体使用哪种方式取决于组件之间的关系和需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值