尚硅谷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>  <!-- 通过info和:属性把值给入子组件  -->
    <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>我是子组件1</p>
      <button>点击我也执行</button>
  </div>
</template>

<script setup lang="ts">

</script>

子2

<template>
  <div class="child">
    <p>我是子组件2</p>
    <button @click="handler">xxx handler</button>
    <button @click="$emit('click','AK47','J20')">自定义事件click</button>
  </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>

<!-- Event1 开箱即用-->
<button>handeler2</button>

<!-- Event2-->
 <button @click="handler">handler3</button>
    <button @click="$emit('click','AK47','J20')">handler4</button>
    <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-model</h1>
    <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修改
后面的就不是很想写了，搞不明白了