尚硅谷Vue项目实战硅谷甄选Vue3学习笔记

Props 父传值子组件

子组件

<template>
  <div class="son">
       <h1>我是子组件:曹植h1>
       <p>{{props.info}}p>
       <p>{{props.money}}p>
       <p>{{info}}p>
       <p>{{money}}p>
       <button @click="updateProps">修改props数据button>
  div>
template>

<script setup lang="ts">
let props = defineProps(['info','money']); //接收父类给予的数值
//按钮点击的回调
const updateProps = ()=>{
  //  props:只读 儿子没有
  console.log(props.info)
}
script>

父组件

<template>
  <div class="box">
    <h1>props:我是父组件曹操h1>
    <hr />
    <Child info="我是曹操" :money="money">Child>  
    <ChildBro info="我是曹丕" :money="money-500">ChildBro>
  div>
template>

<script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的！！！
import Child from "./Child.vue";  //import引入子组件
import ChildBro from "./ChildBro.vue";
import { ref } from "vue";
let money = ref(10000);
script>

CusTom event 子传父

父

<template>
  <div>
    <h1>事件h1>
    <pre @click="handler">
      大江东去浪淘尽,千古分流人物
    pre>
    <button @click="handler1(1,2,3,$event)">点击我传递多个参数button>
    <hr>
    <Event1 @click="handler2">Event1>
    <hr>
    <Event2 @xxx="handler3" @click="handler4">Event2>
  div>
template>

<script setup lang="ts">
//引入子组件
import Event1 from './Event1.vue';
//引入子组件
import Event2 from './Event2.vue';
//事件回调--1
const handler = (event: any)=>{
    //event即为事件对象
    console.log(event);
}
//事件回调--2
const handler1 = (a: any,b: any,c: any,$event: any)=>{
   console.log("handler1"+a,b,c,$event)
}
//事件回调---3
const handler2 = ()=>{
    console.log("handler2"+123);
}
//事件回调---4
const handler3 = (param1: any,param2: any)=>{
    console.log("handler3"+param1,param2);
}
//事件回调--5
const handler4 = (param1: any,param2: any)=>{
     console.log("handler4"+param1,param2);
}
script>

子1

<template>
  <div class="son">
      <p>我是子组件1p>
      <button>点击我也执行button>
  div>
template>

<script setup lang="ts">

script>

子2

<template>
  <div class="child">
    <p>我是子组件2p>
    <button @click="handler">xxx handlerbutton>
    <button @click="$emit('click','AK47','J20')">自定义事件clickbutton>
  div>
template>

<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click']);
//按钮点击回调
const handler = () => {
  //第一个参数:事件类型 第二个|三个|N参数即为注入数据
    $emit('xxx','东风导弹','航母');
};
script>

具体代码`

 
<pre @click="handler">handler点击事件pre>
<button @click="handler1(1,2,3,$event)">点击我传递多个参数button>
<Event1 @click="handler2">Event1>
<Event2 @xxx="handler3" @click="handler4">Event2>


<button>handeler2button>


 <button @click="handler">handler3button>
    <button @click="$emit('click','AK47','J20')">handler4button>
    <script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click']); //拿下父类给予的自定义事件xxx
//按钮点击回调
const handler = () => {
    $emit('xxx','东风导弹','航母'); //该回调用的是父类给予的handler3
};
script>

兄弟之间传值

曹植

<template>
  <div class="child1">
    <h3>我是子组件1:曹植h3>
   <p>p>
  div>
template>
<script setup lang="ts">
import $bus from "../../bus";
import { onMounted } from "vue";
import { ref } from "vue";
onMounted(() => {
  //第一个参数:即为事件类型  第二个参数:即为事件回调
  $bus.on("car", (car) => {
    document.getElementsByTagName("p")[0].innerHTML="目前收到："+car.car+"台法拉利";
    console.log(car);
  });
});
script>

曹丕

<template>
  <div class="child2">
     <h2>我是子组件2:曹丕h2>
     <button @click="handler">点击我给兄弟送一台法拉利button>
  div>
template>
<script setup lang="ts">
import $bus from '../../bus';
let count=1;
const handler = ()=>{
  $bus.emit('car',{car:count});
  count++;
}
script>

我自己改了一下 ，没什么难的，用的mitt插件，mitt带着数据到处跑，哪里引入mitt，哪里就能用，所谓总线

V-model

父

<template>
  <div>
    <h1>v-model:钱数{{ money }}{{pageNo}}{{pageSize}}h1>
    <input type="text" v-model="money"  placeholder="money"/>
    <hr />
    <Child v-model="money">Child>
    <hr />
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize">Child1>
  div>
template>

<script setup lang="ts">
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
import { ref } from "vue";
//父组件的数据钱数
let money = ref(10000);
//自定义事件的回调
const handler = (num) => {
  //将来接受子组件传递过来的数据
  money.value = num;
};
//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
script>

子1

<template>
  <div class="child">
    <h3>钱数:{{ modelValue }}h3>
    <button @click="handler">父子组件数据同步button>
  div>
template>
<script setup lang="ts">
//接受props
let props = defineProps(["modelValue"]);
let $emit = defineEmits(['update:modelValue']);
//子组件内部按钮的点击回调
const handler = ()=>{
   //触发自定义事件
   $emit('update:modelValue',props.modelValue+1000);
}
script>

子2

<template>
  <div class="child2">
    <h1>同时绑定多个v-modelh1>
    <button @click="handler">pageNo{{ pageNo }}button>
    <button @click="$emit('update:pageSize', pageSize + 4)">
      pageSize{{ pageSize }}
    button>
  div>
template>

<script setup lang="ts">
let props = defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {
  $emit("update:pageNo", props.pageNo + 3);
};
script>

父组件定义好值，通过v-model传入子组件子组件通过props接收，通过handler修改
后面的就不是很想写了，搞不明白了