VUE3.0兄弟组件传值 provide 和inject 传值 ref的使用 自定义指令

组件APP中有兄弟组件left，right需要相互传值

1.安装mitt包

 cnpm i mitt@2.1.0 -S

2.新建一个eventBus.js 文件

// eventBus

// 导入mitt包
import mitt from 'mitt'
// 创建eventBus的实例对象
const bus = mitt()

// 导出eventBus
export default bus

3 在right组件中导入eventbus并接受

export default {
  name: 'MyRight',
  data() {
    return {
      num: 0,
    }
  },
  created() {
    // count是接收过来的值，bus.on 是接受值  
      //countChange需要和后面的传值相同
    bus.on('countChange', count => {
      this.num = count
    })
  },
}

4.在left组建中导入eventbus并传递

export default {
  name: 'MyLeft',
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    add() {
      this.count++
        //与前面一样，后面为传值的内容
      bus.emit('countChange', this.count)
    },
  },
}

provide 和inject 传值

树状需要传值

比如 app用到了 1组件，1组件又用到了2组件

现在要从app 传值给 2组件，在app中声明provide

  data() {
    return {
      color: 'red',
      count: 1
    }
  },
  provide(){
    return {
       //需要传值的值
      color: this.color,
      count: this.count
    }
  },

在2组件中声明inject

export default {
  name: 'LevelThree',
  inject:['color','count']
}

2.传值接收响应式数据

现在要从app 传值给 2组件，在app中声明provide （响应式）

  data() {
    return {
      color: 'red',
      count: 1
    }
  },
  provide(){
    return {
       //需要传值的值
      color: computed(()=>this.color),
      count: this.count
    }
  },

在2组件中声明inject

//页面显示时使用.value方法
{{color.value}}

export default {
  name: 'LevelThree',
  inject:['color','count']
}

自定义指令

//自定义指令要以v-开头
<input type="text" class="form-control" v-focus v-color="'cyan'" />

//在directives声明
export default {
  name: 'MyHome',
  data() {
    return {
      count: 0,
    }
  },
  directives: {
    //这里的名字要和前面命名的一样
    focus: {
      //绑定需要对应的dom元素  当被绑定的元素插入到DOM中的时候，自动触发mounted函数
      mounted(el) {
        el.focus()
      },
    }
  }
}

定义全局的自定义事件

//简写 可以同时调用updata 和 mounted
app.directive('focus', (el) => {
  el.focus()
})

app.directive('color', (el, binding) => {
  el.style.color = binding.value
})