vue3的组件通信&v-model使用实例详解

方法一 普通方式:
// 父组件 传值
    <child :msg1="msg1" :list="list"></child>
    <script>
       import child from "./child.vue";
       import { ref, reactive } from "vue";
       export default {
         setup() {
           //基础类型传值
           const msg1 = ref("父组件传给子组件的msg1");
           // 复杂类型（数组或对象）传值
           const list = reactive(['苹果', '梨', '香蕉'])
           return {
             msg1,
             list
           }
         }
       }
    </script>
// 子组件 接收
<template>
  <ul >
    <li  v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script>
export default {
  // props接受父组件传过来的值
  props: ["msg1", "list"],
  setup(props) {
    console.log(props);
    // { msg1:"父组件传给子组件的msg1", list:['苹果', '梨', '香蕉'] }
  },
}
</script>

方法二:使用setup语法糖
// 父组件 传值
<child :msg="msg" :list="list">
</child>
<script setup>
    import child from "./child.vue";
     const list = reactive(['苹果', '梨', '香蕉'])
    const msg = ref("父组件传给子组件的值");
</script>
// 子组件 接收
<template>
  <ul >
    <li  v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
    // 这里不需要在从vue中引入defineProps，直接用
    const props = defineProps({
        // 第一种写法
        msg: String,
        // 第二种写法
        list: {
	    	type: Array,
	   	 	default: () => [],
	  	}
    })
    console.log(props);
</script>

// 子组件 派发
<template>
  <button @click="handleClick">按钮</button>
</template>
<script setup>
  let infos = ref('还好');
  const emit = defineEmits(['myClick']);//emits 为 defineEmits 显示声明后的对象。
// defineEmits:如存在多个监听事件则为 defineEmits(['increase','myClick'])
  const handleClick = () => {
    // 触发父组件中的方法，并把值以参数的形式传过去
    emit('myClick', infos);
    emit('increase', ref('还好33'));
  };
</script>
// 父组件 接收
<template>
    <child @myClick="onMyClick"  @increase="onIncrease"></child>
</template>
<script setup>
    import child from "./child.vue";
    // 父组件接受到子组件传过来的值
    const onMyClick = (msg) => {
        console.log(msg);
    }
    const onIncrease = (msg) => {
    console.log(msg.value);
}
</script>

<template>
  <div>父组件：拿到子组件的message数据：{{ msg }}</div>
  <button @click="callChildFn">调用子组件的方法</button>
  <hr />
  <Child ref="com" />
</template>
<script setup>
  import Child from './child.vue';
  const com = ref(null); // 通过 模板ref 绑定子组件
  const msg = ref('');
  onMounted(() => {
    // 在加载完成后，将子组件的 message 赋值给 msg
    msg.value = com.value.message;
  });
  function callChildFn() {
    console.log(com.value, '====');
    // 调用子组件的 changeMessage 方法
    com.value.show();
    //  重新将 子组件的message 赋值给 msg
    msg.value = com.value.message;
  }
</script>
子组件：
<template>
  <div> 子组件：</div>
</template>
<script setup>
  const message = ref('子组件传递得信息');
  const show = () => {
    console.log('子组件得方法');
  };
  defineExpose({
    message,
    show,
  });
</script>
 

<template>
  <Child :msg1="msg1" :msg2="msg2" title="子组件" />
</template>
<script setup>
  import Child from './child.vue';
  const msg1 = ref('信息1');
  const msg2 = ref('信息2');
</script>
子组件
<template>
  <div> 子组件：{{ msg1 }}-{{ attrs.msg2 }}-{{ attrs.title }}</div>
</template>
<script setup>
  // 子组件接收msg1
  defineProps({
    msg1: String,
  });
  const attrs = useAttrs();
  // 因为子组件接收了msg1，所以打印的结果中不会包含msg1, { msg2:"信息1", title: "子组件" }
  // 如果子组件没有接收msg1，打印的结果就是 { msg1: "信息1", msg2:"信息12", title: "子组件" }
  console.log(attrs);
</script>
 

<template>
  <div>------祖父组件---------</div>
  <button @click="fn">改变location的值</button>
  <br />
  <div>双向数据绑定：</div>
  姓名 {{ userInfos.username }}：
  <input v-model="userInfos.username" />
  <Child />
</template>
<script setup>
  import Child from './child.vue';
  let location = ref('传递祖父的参数');
  var userInfos = reactive({
    username: '张三',
    age: 20,
  });
  let fn = () => {
    location.value = '改变值';
  };
  provide('location', location);
  provide('userInfos', readonly(userInfos));
</script>
子组件：
<template>
	<div>
		  <Sun />
	</div>
</template>
<script>
import Sun from "./sun.vue";
</script>
孙组件：
<template>
  <div>
    <h5>-------------孙组件接受参数-------------</h5>
    <div>1.祖父组件定义provide，孙组件inject接受：{{ location }}</div>
    <p>用户信息： {{ userInfos.username }}</p>
    <br />
    <br />
    <div>2.provide inject实现父子组件传值的时候，子组件改变数据也会影响父组件</div>
    <br />姓名：
    <input v-model="userInfos.username" />
  </div>
</template>
<script setup>
  let location = inject('location');
  let userInfos = inject('userInfos');
</script>
注意：增加readonly后，子组件修改后，不会影响到父组件
类似安全的provide/inject
使用vue提供的injectionKey 类型工具来再不同的上下文中共享类型
context。ts
import { InjectionKey, Ref } from 'vue'
export interface SetUser{
 name: string
  age: number
}
// 函数的的InjectionKey
export const setUserKey: InjectionKey<SetUser> = Symbol()
父组件
<script setup>
import {setUserKey } from './context'
provide(setUserKey , { 
name: 'Karen', //如果输入1，那么类型就会报错
age: 20
 })
</script>
子组件
<script setup>
import {setUserKey } from './context'
const user =inject(setUserKey)// 输出SetUser | undefined
if(user){
console.log(user.name)//Karen
}
</script>
 

<template>
  <Child v-model="message" />
</template>
<script setup>
  import Child from './child.vue';
  const message = ref('父传给子');
</script>
子组件：
<template>
  <div>
    <button @click="handleClick">修改model</button>
    {{ modelValue }}
  </div>
</template>
<script setup>
  // 接收
  defineProps([
    'modelValue', // 接收父组件使用 v-model 传进来的值，必须用 modelValue 这个名字来接收
  ]);
  const emit = defineEmits(['update:modelValue']); // 必须用 update:modelValue 这个名字来通知父组件修改值
  function handleClick() {
    // 参数1：通知父组件修改值的方法名
    // 参数2：要修改的值
    emit('update:modelValue', '子改变值');
  }
</script>
 

<template>
  <Child v-model:msg1="message1" v-model:msg2="message2" />
</template>
<script setup>
  import Child from './child.vue';
  const message1 = ref('水果1');
  const message2 = ref('水果2');
</script>
子组件：
<template>
  <div>
    <div><button @click="changeMsg1">修改msg1</button> {{ msg1 }}</div>
    <div><button @click="changeMsg2">修改msg2</button> {{ msg2 }}</div>
  </div>
</template>
<script setup>
  // 接收
  defineProps({
    msg1: String,
    msg2: String,
  });
  const emit = defineEmits(['update:msg1', 'update:msg2']);
  function changeMsg1() {
    emit('update:msg1', '蔬菜1');
  }
  function changeMsg2() {
    emit('update:msg2', '蔬菜2');
  }
</script>

<template>
  <Child v-model.uppercasefn="message" />
</template>
<script setup>
  import Child from './child.vue';
  const message = ref('水果');
</script>
子组件：
<template>
  <div>
    <div>{{ modelValue }}</div>
  </div>
</template>
<script setup>
  const props = defineProps(['modelValue', 'modelModifiers']);
  const emit = defineEmits(['update:modelValue']);
  onMounted(() => {
    console.log(props.modelModifiers, '自定义v-model 修饰符');
    // 判断有没有uppercasefn修饰符，有的话就执行 下面得方法 方法
    if (props.modelModifiers.uppercasefn) {
      emit('update:modelValue', '蔬菜');
    }
  });
</script>
 

<template>
  <Child>
    <div>渲染</div>
  </Child>
</template>
子组件：
// Child.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

<template>
  <Child>
    <template v-slot:monkey>
      <div>渲染</div>
    </template>
    <button>按钮</button>
  </Child>
</template>
子组件：
<template>
  <div>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="monkey"></slot>
  </div>
</template>

<template>
  <!-- v-slot="{scope}" 获取子组件传上来的数据 -->
  <!-- :list="list" 把list传给子组件 -->
  <Child v-slot="{ scope }" :list="list">
    <div>
      <div>{{ scope.name }}--职业：{{ scope.occupation }}</div>
      <hr />
    </div>
  </Child>
</template>
<script setup>
  import Child from './child.vue';
  const list = reactive([
    { name: '鲁班', occupation: '辅助' },
    { name: '貂蝉', occupation: '刺客和法师' },
    { name: '虞姬', occupation: '射手' },
  ]);
</script>
子组件：
<template>
  <div>
    <!-- 用 :scope="item" 返回每一项 -->
    <slot v-for="item in list" :scope="item"></slot>
  </div>
</template>
<script setup>
  defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  });
</script>