props通信
可以实现父子组件通信，props数据还是只读的！！！
javascript"><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>
javascript"><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>
自定义事件
javascript"><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>
javascript"><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>
javascript"><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事件
javascript"><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事件。
