props通信
可以实现父子组件通信,props数据还是只读的!!!
<template>
<div class="box">
<h1>props:我是父组件曹操</h1>
<hr />
<Child info="我是曹操" :money="money"></Child>
</div>
</template>
<script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的!!!
import Child from "./Child.vue";
import { ref } from "vue";
let money = ref(10000);
</script>
<style scoped>
.box {
width: 100vw;
height: 400px;
background: yellowgreen;
}
</style>
<template>
<div class="son">
<h1>我是子组件:曹植</h1>
<p>{{ props.info }}</p>
<p>{{ props.money }}</p>
<!--props可以省略前面的名字--->
<p>{{ info }}</p>
<p>{{ money }}</p>
<button @click="updateProps">修改props数据</button>
</div>
</template>
<script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(["info", "money"]); //数组|对象写法都可以
// let props = defineProps({
// info:{
// type:String,//接受的数据类型
// default:'默认参数',//接受默认数据
// },
// money:{
// type:Number,
// default:0
// }}); // 对象写法
// 这里的props只是一个代理项,在模板中使用时是可以省略的。
//按钮点击的回调
const updateProps = () => {
// props.money+=10; props:只读的
console.log(props.info);
};
</script>
<!-- <script>
export default {
props: ["info", "money"]
};
// 这里是vue2选择式api的写法,vue3都用上面那个组合式api的写法。
</script> -->
<style scoped>
.son {
width: 400px;
height: 200px;
background: hotpink;
}
</style>
自定义事件
<template>
<div>
<h1>事件</h1>
<!-- 原生DOM事件 -->
<pre @click="handler">
大江东去浪淘尽,千古分流人物
</pre>
<button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button>
<hr />
<!--
vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
vue3框架下面写法其实即为原生DOM事件
vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
-->
<Event1 @click="handler2"></Event1>
<hr />
<!-- 绑定自定义事件xxx:实现子组件给父组件传递数据 -->
<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 => {
// 原生DOM事件,会向事件回调注入事件对象
//默认就是event,即为事件对象
console.log(event);
};
//事件回调--2
const handler1 = (a, b, c, $event) => {
console.log(a, b, c, $event);
};
//事件回调---3
const handler2 = () => {
console.log(123);
};
//事件回调---4
const handler3 = (param1, param2) => {
console.log(param1, param2);
};
//事件回调--5
const handler4 = (param1, param2) => {
console.log(param1, param2);
// alert("123");
};
</script>
<style scoped></style>
<template>
<div class="son">
<p>我是子组件1</p>
<button>点击我也执行</button>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.son{
width: 400px;
height: 200px;
background: skyblue;
}
</style>
<template>
<div class="child">
<p>我是子组件2</p>
<button @click="handler">点击我触发自定义事件xxx</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>
<style scoped>
.child {
width: 400px;
height: 200px;
background: pink;
}
</style>
在vue框架中,事件分为两种:原生的DOM事件,自定义事件。
原生的DOM事件可以让用户与网页进行交互,比如:click、dbclick、change、mouseenter、mouseleave…
自定义事件可以实现子组件给父组件传递数据。
原生DOM事件
<pre @click="handler">
我是祖国的老花骨朵
</pre>
<div @click="handler1(1,2,3,$event)">我要传递多个参数</div>
当前代码级给pre标签绑定原生DOM事件点击事件,默认会给事件回调注入event事件对象。点击事件也可以注入多个参数。
**切记:**注入的事件对象务必叫做$event。
在vue3框架中,click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
但在vue2中,组件标签需要通过.native修饰符才能变为原生DOM事件。