Vue组件传值

Vue3父组件直接修改子组件的值

父组件：

import { ref, reactive, onMounted } from "vue";
const auth = ref();
onMounted(() => {
  auth.value.val = "2222";
});

Vue3子组件修改父组件的值

// 父组件：
<Auth v-model:sum="10"></Auth>;
// 子组件： 接收值
const props = defineProps({
  sum: {
    type: Number,
  },
});

//修改值
const emit = defineEmits(["update:sum"]);
const btn = () => {
  emit("update:sum", 200);
};

Vue3兄弟组件的传值

1》下载安装

  npm install mitt -S

2》plugins/Bus.js

  import mitt from 'mitt';
  const emitter = mitt()
  export default emitter;

3》A组件
  import mitter from '../plugin/bus.js'
	emitter.emit('fn',str);

4》B组件
  import mitter from '../plugin/bus.js'
  emitter.on('fn',e=>{
  	s.value = e.value;
  })