Vue2、3组件通信、双向绑定、插槽slot、内置指令

已于 2024-07-13 17:31:10 修改
阅读量2.8k 收藏 2
点赞数 1
分类专栏： 前端面试 vue 文章标签： react.js vue.js 前端
于 2023-07-18 10:59:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28838891/article/details/131780624
版权

目录

Vue3

父子传值：props（attrs）/emit

父传子

props

父child :属性名="变量"

子props=defineProps({属性名:type...})

attrs父作用域（除 class、 style 、 props ）属性集合

父child :属性名="变量"，属性名="常量"

子 attrs = useAttrs()

子传父emits+@=v-on:

父child @事件名"="parentClick"，parentClick(msg)

子emit = defineEmits(["事件名"，...])，emit("key",msg)

双向绑定v-model（一个元素可多个v-model，所以取消了.sync）

父child  v-model:属性名="变量"

子emit = defineEmits(["事件名"，...])，emit("事件名",值)

父调子事件/属性：expose / ref

父child ref="childComp"，childComp.value.属性/方法

子defineExpose({属性: "msg",方法(){  }})

祖传孙provide / inject依赖注入【不推荐】

耦合性增加->依赖关系复杂化->重用性和可维护性低

父provide("key",msg)

子inject("key")

跨组件事件触发/监听器mitt：on/off，emit

代替vue2的eventbus

轻量级：仅有200字节

支持全部事件的监听和批量移除

跨框架：不依赖 Vue 实例，React / Vue/jQuery

原理：map 保存函数

直接在组件内导入使用：分散式更方便管理和排查问题

Vue2

父子传值：props（attrs）/emit

父传子

props

父child :属性名="父组件实例变量"

子

A.数组：props:['属性名']

B.对象：props:{属性名:{type:,default:}}

attrs父作用域（除 class、 style 、 props ）属性集合

父child :属性名="变量"，属性名="常量"

子 this.$attrs

子传父emits+@=v-on:

父child @事件名"="parentClick"，parentClick(msg)

子this.$emit("事件名",msg)

双向绑定值

.sync（支持多个，update:属性名）

父child :属性名.sync="变量"

子 this.$emit("update:属性名", 属性值 ); 

v-model​​​​​​​一个元素一个v-model，可自定义prop+event名

父子传属性/方法

父传子

this.$parent

this.$root ： App.vue

this.$listeners：父组件.native 除外的监听事件集合

调用：this.$listeners.事件名

子传父

this.$children[0]

ref

父child ref="childComp"，childComp.所有的属性/方法

祖传孙provide / inject依赖注入：推荐传递常量/方法

父provide(){return obj }

子inject[“name”,“msg”]，this.msg

跨组件事件通信EventBus中央事件总线

定义

使用：emit、on、off

slot：父传子组件，子传父数据

单个/默认/匿名插槽slot

v-slot="name"，在2.6后可缩写为#"name"

父v-slot="子slot中的变量"

子slot :属性名="变量"

具名插槽slot name=""：多个插槽，需要区分

作用域/带数据的插槽

内置指令:数据/事件关联DOM

v-bind（简写:）：绑定属性到 Vue 实例中的数据

v-on （简写@）: 监听DOM事件、触发Vue实例中的方法

v-model:modelValue=v-modelv-model=v-bind(:)+v-on(@)

Vue3

Vue3 从实例中完全删除了 $on、$off 和 $once 方法

父子传值：props（attrs）/emit

父传子

props
父child :属性名="变量"
子props=defineProps({属性名:type...})
// Parent.vue 传送
<child :msg2="msg2"></child>
<script setup>
    import child from "./child.vue"
    import { ref, reactive } from "vue"
    const msg2 = ref("这是传给子组件的信息2")
    // 或者复杂类型
    const msg2 = reactive(["这是传级子组件的信息2"])
</script>

// Child.vue 接收
<script setup>
    // 不需要引入 直接使用
    // import { defineProps } from "vue"
    const props = defineProps({
        // 写法一
        msg2: String
        // 写法二
        msg2:{
            type:String,
            default:""
        }
    })
    console.log(props) // { msg2:"这是传级子组件的信息2" }
</script>
attrs父作用域（除 class、 style 、 props ）属性集合
父child :属性名="变量"，属性名="常量"
子 attrs = useAttrs()
// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
    import child from "./child.vue"
    import { ref, reactive } from "vue"
    const msg1 = ref("1111")
    const msg2 = ref("2222")
</script>

// Child.vue 接收
<script setup>
// 3.2版本不需要引入，直接用
    import { useAttrs } from "vue"
    
// 如果没有用 props 接收 msg1 的话就是 { msg1: "1111", msg2:"2222", title: "3333" }
    const props = defineProps({
        msg1: String
    })

    const attrs = useAttrs()
    console.log(attrs) // { msg2:"2222", title: "3333" }
</script>

子传父emits+@=v-on:

父child @事件名"="parentClick"，parentClick(msg)
子emit = defineEmits(["事件名"，...])，emit("key",msg)
//父组件
<template>
  <my-son  @childClick="childClick" />
</template>

<script lang="ts" setup>
import MySon from "./MySon.vue";

let childClick = (e: any):void => {
  console.log('from son：',e);  
};
</script>


//子组件
<template>
  <span @click="sonToFather">信息:{{ props.foo }}</span>
</template>

<script lang="ts" setup>
const emit = defineEmits(["childClick"]);     // 声明触发事件 childClick

const sonToFather = () =>{
    emit('childClick' , props.foo)
}
</script>

双向绑定v-model（一个元素可多个v-model，所以取消了.sync）

父child  v-model:属性名="变量"
子emit = defineEmits(["事件名"，...])，emit("事件名",值)
//child.vue
<template>
  <span @click="changeInfo">我叫{{ modelValue }}，今年{{ age }}岁</span>
</template>

<script setup>
  // import { defineEmits, defineProps } from 'vue'
  // defineEmits和defineProps在<script setup>中自动可用，无需导入
  // 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

  defineProps({
    modelValue: String,
    age: Number
  })

  const emit = defineEmits(['update:modelValue', 'update:age'])
  const changeInfo = () => {
    // 触发父组件值更新
    emit('update:modelValue', 'Tom')
    emit('update:age', 30)
  }
</script>
//parent.vue
<template>
  // v-model:modelValue简写为v-model
  // 可绑定多个v-model
  <child
    v-model="state.name"
    v-model:age="state.age"
  />
</template>

<script setup>
  import { reactive } from 'vue'
  // 引入子组件
  import child from './child.vue'

  const state = reactive({
    name: 'Jerry',
    age: 20
  })
</script>

父调子事件/属性：expose / ref

父child ref="childComp"，childComp.value.属性/方法

子defineExpose({属性: "msg",方法(){  }})

// Child.vue
<script setup>
    // 方法一 不适用于Vue3.2版本，该版本 useContext()已废弃
    import { useContext } from "vue"
    const ctx = useContext()
    // 对外暴露属性方法等都可以
    ctx.expose({
        childName: "这是子组件的属性",
        someMethod(){
            console.log("这是子组件的方法")
        }
    })
    
    // 方法二 适用于Vue3.2版本, 不需要引入
    // import { defineExpose } from "vue"
    defineExpose({
        childName: "这是子组件的属性",
        someMethod(){
            console.log("这是子组件的方法")
        }
    })
</script>

// Parent.vue  注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handlerClick">按钮</button>
</template>
<script setup>
    import child from "./child.vue"
    import { ref } from "vue"
    const comp = ref(null)
    const handlerClick = () => {
        console.log(comp.value.childName) // 获取子组件对外暴露的属性
        comp.value.someMethod() // 调用子组件对外暴露的方法
    }
</script>

祖传孙provide / inject依赖注入【不推荐】

耦合性增加->依赖关系复杂化->重用性和可维护性低

耦合性：关联度

父provide("key",msg)

子inject("key")

// Parent.vue
<script setup>
    import { provide } from "vue"
    provide("name", "沐华")
</script>

// Child.vue
<script setup>
    import { inject } from "vue"
    const name = inject("name")
    console.log(name) // 沐华
</script>

跨组件事件触发/监听器mitt：on/off，emit

代替vue2的eventbus

轻量级：仅有200字节

支持全部事件的监听和批量移除

跨框架：不依赖 Vue 实例，React / Vue/jQuery

原理：map 保存函数

export default function mitt(all) {
	all = all || new Map();
//命名为type的事件
	return {
		all,
        //监听type事件，绑定handler
		on(type, handler) {
			const handlers = all.get(type);
			const added = handlers && handlers.push(handler);
			if (!added) {
				all.set(type, [handler]);
			}
		},
       //移除type事件，解绑handler
		off(type, handler) {
			const handlers = all.get(type);
			if (handlers) {
				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
			}
		},
       //触发type事件，传递evt事件参数给handler（遍历执行与其绑定的所有handler）
		emit(type, evt) {
			((all.get(type) || [])).slice().map((handler) => { handler(evt); });
			((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
		},
        clear(){
            // 清空所有事件处理程序
            all.clear();
        },
	};
}

直接在组件内导入使用：分散式更方便管理和排查问题

npm i mitt -save

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

Vue3.x 推荐使用 mitt.js - 掘金

Vue2

父子传值：props（attrs）/emit

父传子

props
父child :属性名="父组件实例变量"
子
A.数组：props:['属性名']
B.对象：props:{属性名:{type:,default:}}
// Child.vue 接收
export default {
  // 写法一 用数组接收
  props:['msg'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}
attrs父作用域（除 class、 style 、 props ）属性集合
父child :属性名="变量"，属性名="常量"
子 this.$attrs

子传父emits+@=v-on:

父child @事件名"="parentClick"，parentClick(msg)
子this.$emit("事件名",msg)
// Child.vue 派发
export default {
  data(){
      return { msg: "这是发给父组件的信息" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
// Parent.vue 响应
<template>
    <child v-on:sendMsg="getChildMsg"></child>
    // 或 简写
    <child @sendMsg="getChildMsg"></child>
</template>

export default {
    methods:{
        getChildMsg(msg){
            console.log(msg) // 这是父组件接收到的消息
        }
    }
}

双向绑定值

.sync（支持多个，update:属性名）

 .sync 修饰符是单向数据流的典型范式。 『数据向下，事件向上』

单向数据流8字真诀

父child :属性名.sync="变量"
子 this.$emit("update:属性名", 属性值 ); 
//父组件
<template>
    <TestCom :num.sync="data"></TestCom>
</template>
<script>
export default({
  components: {
    TestCom,
  },
  data() {
    return {
      data:2
    }  
  },
});
</script>


//子组件
<template>
  <div>
    <button @click="cahngeNum">按钮</button>
    {{ num }}
  </div>
</template>

<script>
export default({
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  methods: {
    cahngeNum() {
       // 事件名称的格式 'update:' + prop名称 
      this.$emit("update:num", 999); 
    },
  },
});
</script>
v-model​​​​​​​一个元素一个v-model，可自定义prop+event名

除了传递基本的值之外，还可以传递其他类型，比如对象或数组。

主要用于表单元素（如输入框、复选框、单选框等input, textarea,select,radio,checkbox等用户输互动入事件）

语法糖，简单来说就是『便捷写法』。

<input v-model="searchText">
语法糖 等价于：
<input
  :value="searchText"
  @input="searchText = $event.target.value"
>

当用户在输入框中输入文本时，userMessage 的值会实时更新，

并且当 userMessage 的值改变时，输入框中的值也会自动更新。

v-model 在内部相当于使用 :value 和 @input 来实现数据的绑定和监听。

// Parent.vue
<template>
    <child v-model="value"></child>
</template>
<script>
export default {
    data(){
        return {
            value:1
        }
    }
}

// Child.vue
<template>
    <input :value="value" @input="handlerChange">
</template>
export default {
    props:["value"],
    methods:{
        handlerChange(e){
            this.$emit("input", e.target.value)
          
        }
    }
}
</script>
父子传属性/方法

父传子

this.$parent
this.$root ： App.vue
this.$listeners：父组件.native 除外的监听事件集合
调用：this.$listeners.事件名

将父组件传递的事件监听器绑定到子组件上，以实现一种“透明传递”的效果。这种方式使得子组件不需要显式声明和监听来自父组件的事件

在父组件 自定义的所有事件，都被保存在子组件的vm.$listeners属性里，和$attrs一样可以层层传递

son组件可以响应father组件的2个自定义事件speak()、write()

grandson组件可以响应father组件的2个自定义事件speak()、write()，并且还可以响应son组件的1个自定义事件sonCry()

子传父

this.$children[0]
ref
父child ref="childComp"，childComp.所有的属性/方法
// Child.vue
export default {
    data(){
        return {
            name:"沐华"
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

// Parent.vue
<template>
    <child ref="child"></child>
</template>
<script>
export default {
    mounted(){
        const child = this.$refs.child
        console.log(child.name) // 沐华
        child.someMethod("调用了子组件的方法")
    }
}
</script>
祖传孙provide / inject依赖注入：推荐传递常量/方法

要注意的是 provide 和 inject 传递的数据不是响应式的，除非传入的就是一个可监听的对象

父provide(){return obj }

obj={name：,msg：}

子inject[“name”,“msg”]，this.msg

跨组件事件通信EventBus中央事件总线

定义

// 方法一：独立的事件总线文件
// 抽离成一个单独的 js 文件 Bus.js导出 ，然后在需要的地方导入
// 保持了代码的模块化和清晰性。事件总线和组件逻辑分离，使得维护和理解代码变得更容易。
// Bus.js
import Vue from "vue"
export default new Vue()

// 方法二 全局挂载到Vue原型
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()

// 方法三 注入到 Vue 根对象上，作为Vue实例的数据属性
// 组件通过this.$root.Bus访问
// main.js
import Vue from "vue"
new Vue({
    el:"#app",
    data:{
        Bus: new Vue()
    }
})

使用：emit、on、off

// 在需要向外部发送自定义事件的组件内
<template>
    <button @click="handlerClick">按钮</button>
</template>
import Bus from "./Bus.js"
export default{
    methods:{
        handlerClick(){
            // 自定义事件名 sendMsg
            Bus.$emit("sendMsg", "这是要向外部发送的数据")
        }
    }
}

// 在需要接收外部事件的组件内
import Bus from "./Bus.js"
export default{
    mounted(){
        // 监听事件的触发
        Bus.$on("sendMsg", data => {
            console.log("这是接收到的数据：", data)
        })
    },
    beforeDestroy(){
        // 取消监听
        Bus.$off("sendMsg")
    }
}

slot：父传子组件，子传父数据

单个/默认/匿名插槽slot

v-slot="name"，在2.6后可缩写为#"name"

父v-slot="子slot中的变量"

子slot :属性名="变量"

// Child.vue
<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>
export default{
    data(){
        return {
            user:{ name:"沐华" }
        }
    }
}

// Parent.vue
<template>
    <div>
        <child v-slot="slotProps">
            {{ slotProps.user.name }}
        </child>
    </div>
</template>

具名插槽slot name=""：多个插槽，需要区分

<template>
  // 匿名插槽
  <slot/>
  // 具名插槽
  <slot name='title'/>
</template>

<script setup>
  import { useSlots, reactive } from 'vue'
  const slots = useSlots()
  // 匿名插槽使用情况
  const defaultSlot = reactive(slots.default && slots.default().length)
  console.log(defaultSlot) // slot内的标签
  // 具名插槽使用情况
  const titleSlot = reactive(slots.title && slots.title().length)
  console.log(titleSlot) // 1
  const state = reactive({
    name: '张三',
    age: '25岁'
  })
  
</script>

<template>
  <child>
    // 匿名插槽
    <span>我是默认插槽</span>
    // 具名插槽
    <template #title>
      <h1>我是具名插槽</h1>
    </template>
  </child> 
</template>

作用域/带数据的插槽

<template>
  <slot name="footer" :scope="state" />
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    name: '张三',
    age: '25岁'
  })
  
</script>

 //  { scope } 表示从插槽的内容中解构出一个名为 scope 的变量
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>

内置指令:数据/事件关联DOM

将数据和事件处理程序与 DOM 元素关联，以实现动态数据渲染、事件处理、条件渲染、循环渲染等功能。

v-bind（简写:）：绑定属性到 Vue 实例中的数据

它允许你在模板中动态设置元素属性的值

<div v-bind:id="id"></div>
<div :id="id"></div>

v-on （简写@）: 监听DOM事件、触发Vue实例中的方法

<button @click="doSomething">Click me</button>

vue父子组件之间双向数据绑定的(vue2/vue3)_vue3父子组件双向绑定_前端一枚的博客-CSDN博客

Vue3的8种和Vue2的12种组件通信，值得收藏 - 掘金

v-model:modelValue=v-modelv-model=v-bind(:)+v-on(@)

参宿7
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 三种方式实现组件数据双向绑定
记录开发日常
12-13 2146
在Vue中，组件数据双向绑定是一项非常重要的特性，它使得我们能够轻松地在组件中处理数据的变化并将其同步到视图比如我们想要在父组件中修改数据能够同步给子组件，并且子组件修改数据也能同步给父组件，使他们数据一方发生变化，则双方都发生改变。实现组件数据双向绑定有三种写法分别是常规写法v-model，下面给大家一一演示。
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
10-14
3. **v-slot 指令**：自Vue 2.6.0开始，为了增强可读性并减少语法上的混淆，Vue推荐使用`v-slot`指令来替代之前的`slot`和`slot-scope`。在HTML中，我们使用`v-slot`指令与`slot`属性配合，或者在`template`标签中...
React组件间通信（常用方式，简单易用）
高大志leo的博客
10-27 4471
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。 一、父子组件通信 原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。 首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。 Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传..
vue如何使用slot
最新发布
BradenHan的专栏
06-10 736
Vue 中使用 slot 的方式取决于你是使用 Vue 2 还是 Vue 3，因为这两个版本在插槽（Slot）的语法上有所不同。下面是两个版本的基本使用方法：在 Vue 2 中， 是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。Vue 2 提供了几种类型的 slots，包括默认插槽、具名插槽以及作用域插槽。以下是它们的基本使用方法：默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。父组件使用： 子组件定义： 1
子组件和父组件的双向绑定
m0_57236802的博客
07-04 457
在 Vue.js 中，子组件和父组件的双向绑定通常通过使用自定义事件与。这样就实现了父组件与子组件的双向绑定。以下是一个例子，假设父组件想要与子组件的。中的输入都会反映到父组件的。
父子组件使用双向数据绑定 vue3.x + Ts + ant vue
m0_65150911的博客
07-22 273
本文对双向数据绑定的原理并不深究，直接展示怎样使用，话不多说，开始！！在vue2中，常用的父子间双向数据绑定为（虽然我没有用过，哈哈），但在vue3中就可以直接使用。
react梳理之组件通信(传值)
小张的博客
03-23 3114
react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理 一.react组件常用的通信情景 父子组件通信 兄弟组件通信(非父子组件) 1.父子组件通信 props传值 props传值算是react中最基本的传值方式,如果使用或者学习过vue的会了解到,props也是vue的父子组件基本的传值方式,通过父组件使用子组件的时候绑定值,在子组件中接收props值来完成,props是一个对象,对象内接收了父组件通过键值对方式传递的值,在.
【vue3.2 + ts + vite】使用 slot
票票的博客
05-06 142
vue3 使用slot解决报错问题
vue教程(vue2笔记+vue3笔记)
04-22
7. 组件间通信：Vue2提供了多种通信方式，包括`props`、事件（自定义事件和原生事件）以及全局事件总线。子组件通过自定义事件向父组件传递数据，而父组件可以通过`props`或事件监听器接收。 8. 插槽：插槽允许父...
vue中组件通信的八种方式（值得收藏！）
10-16
在Vue中，组件通信是构建复杂应用的关键。本文将详细阐述Vue组件间通信的八种方式，并结合实例说明它们的适用场景。 1. **Props / $emit** - **父组件向子组件传值**：通过在父组件模板中使用`props`属性将数据...
18.（vue3.x+vite）组件间通信方式之v-model.rar
09-20
本示例"18.（vue3.x+vite）组件间通信方式之v-model.rar"将深入探讨如何在Vue 3.x和Vite构建环境中利用`v-model`进行组件间的双向数据绑定。 首先，Vue 3.x中的`v-model`不再局限于输入元素，而是扩展到了自定义...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
08_组件化-插槽Slot和非父子通信.pptx
01-25
组件化-插槽Slot和非父子通信 在 Vue 中，组件化是非常重要的一环，通过将组件封装成可复用的单元，我们可以更方便地构建应用程序。但是，在封装组件时，我们不能将组件中的内容限制为固定的 div、span 等元素，...
组件的双向绑定
ShenWangNian的博客
07-06 188
【代码】组件的双向绑定。
v-model实现父子互传数据
qq_61950936的博客
08-16 3471
vue---v-model实现父子互传数据.v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。
vue2父子组件双向绑定
shejiu666666的博客
07-31 2057
vue2父子组件双向绑定
vue2和vue3插槽使用对比
song854601134的博客
03-19 1682
文章目录vue3具名插槽一个不带 `name` 的 slot 出口会带有隐含的名字“default”。具名插槽的缩写作用域插槽element-plus #default="AAA"缩写形式：独占默认插槽的缩写语法解构插槽（也即独占插槽的结构插槽）vue2具名插槽作用域插槽 vue3 具名插槽 <slot name="header" > 对于这样的情况，`` 元素有一个特殊的 attribute：name。通过它可以为不同的插槽分配独立的 ID，也就能够以此来决定内容应该渲染到什么地方： &
vue：父子组件之间双向数据绑定的三种方式
Yal_insist的博客
07-15 2246
vue：父子组件之间双向数据绑定的三种方式
react基础组件几种通信方法
Glacier—john的博客
04-09 183
react基础组件几种通信方法 1.父子组件通信 父组件向子组件通信：使用 props 子组件向父组件通信：使用 props 回调 本文使用React 16.8 的新增特性 Hook示例 // Parents父组件 // 使用 props val 传值 // 通过 emit自定义事件 childChange 接收子组件回调 import React, { useState } from...
Vue2与Vue3学习精要：组件通信、插槽与路由传参
"Vue2+Vue3学习笔记，涵盖了Vue框架的关键知识点，包括生命周期、数据绑定、组件创建、属性传递、事件通信、插槽机制、路由传参等" Vue.js是前端开发中常用的JavaScript框架，本笔记主要关注Vue2和Vue3的共性和差异...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值