vue组件之间传参方式

组件之间传参方式:

• 父子Coms: 1-12
• 兄弟Coms: 4/5/11/12
• 跨级Coms: 4/5/6/7/11/12

1. props 父传子
2. $emit 子传父 (最常用的父子通讯方式)
3. ( $parents/$children )
4. $refs 常用于父组件调用子组件的方法（如：列表数据变化通知子组件重新渲染列表等）
5. Vuex 用于任意组件的任意通讯
6. Bus (常用任意两个组件之间通讯)
7. ( provide/inject ) （祖先及其后代传值）常用一些多个组件嵌套封装，一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式
8. ( $attrs/$listeners ) （常用于对原生组件的封装） $attrs 可以获取父组件传进来但没有通过props接收的属性
9. .sync (可以帮我们实现父组件向子组件传递的数据 的双向绑定)
10. v-model(和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据)
11. $root(可以拿到 App.vue 里的数据和方法)
12. slot(把子组件的数据通过插槽的方式传给父组件使用，然后再插回来)

Bus

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // 注册事件
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // 触发事件
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb => cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// 任意两个组件中
// 组件一：在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)

// 组件二：触发事件(如：点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)

( $parents/$children )

// 子组件一：
this.$patent.$on('confirm', handleConfirm)
// 子组件二：
this.$patent.$emit('confirm', list)

// 获取第一个子组件的数据
console.log(this.$children[0].msg)

// 调用根组件的方法
this.$root.handleRoot()

$ref

// 在template中
// ...
<hello-world ref="hello"></hello-world>
// ...
export default {
  mounted(){
    // 调用引用的子组件的方法
    this.$refs.hello.handleRef()
  }
}

provide/inject

//  顶层组件
export default {
  provide(){
    return {
      msg: 'hello world!'
    }
  }
}

//  后代组件
export default {
  inject: ['msg']
}

$listeners 会展开父组件的所有监听的事件（click事件等）常用于更高层级的封装** **举个例子（需求）：一个页面中有两个组件的点击事件触发方法是一样的"

//  父组件
<div>
  <child-first @click="handleClick"></child-first>
  <child-second @click="handleClick"></child-second>
</div>
export default {
  methods: {
    handleClick: (){
      alert('hello')
    }
  }
}

// child-first
<div v-on="$listeners"></div>

// child-second
<div v-on="$listeners"></div>

.sync

// Parent.vue
<template>
    <child :page.sync="page"></child>
</template>
<script>
export default {
    data(){
        return {
            page:1
        }
    }
}

// Child.vue
export default {
    props:["page"],
    computed(){
        // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
        currentPage {
            get(){
                return this.page
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

v-model

// 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"],
    // 可以修改事件名，默认为 input
    model:{
        // prop:'value', // 上面传的是value这里可以不写，如果属性名不是value就要写
        event:"updateValue"
    },
    methods:{
        handlerChange(e){
            this.$emit("input", e.target.value)
            // 如果有上面的重命名就是这样
            this.$emit("updateValue", e.target.value)
        }
    }
}
</script>

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>