vue2 vue3 各传值汇总

序：

vue最常见的，容易为难新手的，应该就是组件间的传参的，所以本次笔记就记录下传参，顺带也记录下vue2吧

一、vue3

1、父传子

父组件atherTitle，fatherMoney，fatherWifi，thisIsEmpty等都是传过去给子组件的

子组件接收defineProps() 接收父组件传递过来的参数，defineProps在setup语法糖可以直接使用，不需要import

TS 特有的默认值方式

withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps(), {
    title: "张三",
    data: () => [1, 2, 3]
})

2、子传父

子组件

父组件@onMySonFunc=“funcToSon”，这样上面的子组件就能调用到父组件的funcToSon()方法了

3、隔代传

父组件provide传递参数到其他子孙组件

儿子组件用inject接收父组件传递过来的参数

孙子组件也可以用inject接收父组件传递过来的参数

4、第三库（mitt || tiny-emitter）

mitt 使用举例：

// eventBus.js
import mitt from 'mitt';

const emitter = mitt();

export default emitter;

// a.js
import emitter from './utils/eventBus'

emitter.emit('panda', {name: 'lokka', age: 2})
emitter.emit('flamingo', {name: 'disy', age: 1})

// b.js
import emitter from './utils/eventBus'
// 逐个监听
—————————————————————————————————————————
emitter.on('panda', (val) => {
	console.log(val)
})

emitter.on('flamingo', (val) => {
	console.log(val)
})

// 取消监听
funtion onFoo() {}
emitter.on('foo', onFoo)
emitter.off('foo', onFoo)
—————————————————————————————————————————
// 监听多个
emitter.on('*', (type, val) => {
	console.log(type, val)
})

// 取消监听多个
emitter.all.clear()

封装瀑布流组件

父组件：

子组件：

二、vue2

1、父传子

父组件

子组件

2、子传父

2.1、$emit

父组件

子组件

2.2、直接传

父组件

子组件

2.3、$refs

父组件

子组件

2.4、$parent

$root 和 $parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件(App.vue) 所以存在组件嵌套的情况下 不要使用 $root

父组件

子组件

3、兄弟传值

在main.js种挂载全局EventBus

Vue.prototype.$EventBus = new Vue()

A组件

B组件

4、隔代传值（ provide / inject）

provide是父级组件需要传递给子孙组件的属性/方法

//选项一
provide: {
  content: 'hello world'
}

//选项二
provide(){
  return {
    content: 'hello world'
  }
}

inject是子孙组件用来接收父级组件属性/方法

//选项一
inject: ['content']

//选项二
inject: {
  content: 'content'
}

//选项三
inject: {
  content: {
    from:'content',
    default:'hello world'
  }
}

a.vue

aa.vue

5、跨级（$attrs / $listeners）

• **$attrs：\ast \ast 包含了父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• **$listeners：\ast \ast 包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners" 传入内部组件

父组件

子组件aa.vue

子组件aaa.vue

总结： $attrs 与 $listeners是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

6、插件传值

安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递

• publishSync 同步发送消息
• publish 同步发送消息
• subscribe 订阅消息
• unsubscribe 卸载特定订阅
• clearAllSubscriptions 清除所有订阅

组件A

组件B

7、路由传值

7.1、页面直接传参

    查看附件

7.2、通过方法传递参数

methods: {
    society() {
        //console.log('society');
        this.$router.push({
            name:'society',
            query:{value:1}
        })
},

7.3、接值

methods:{
    loadData:function(){
    	this.id = this.$route.query.order_id;
    	axios.get("http://testqywx.origimed.com:18082/weixin-qy/order/Order/userOrderFilesList.json?usercode=sysadmin&orderId="+this.id)
    	.then(response=>this.tasks=response.data.reason);
    }
},

哎呀，累了，没想到总结下来，还不少，暂时先这么多吧，回头有了再更新~