![在子组件中传递事件并在子组件中调用该事件[web前端][vue框架]](https://100zi.50zi.cn/uploadfile/img/14/922/5747a79423329d9a92d00bb87d32c8b1.jpg)
向子组件中传递事件并在子组件中调用该事件
在子组件中调用父组件中传递过来的相关事件必须使用this.$emit(“函数名”)方式调用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>向子组件中传递事件并在子组件中调用该事件</title><!-- 导入vue.js文件 --><script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id = "app"><!-- 使用组件 --><login @find = "findAll()" name = "小黑"></login><!-- 此时就是自定义find事件和Vue中的findAll()方法进行了绑定, 而在login组件中的change1()方法中使用this.$emit("事件名")方法触发了我们的find事件, 那么当find事件触发之后就会执行Vue中的findAll()方法--></div><script type="text/javascript">// 创建组件对象const login = {template : "<div>{{username}}<input type = 'button' value = '点击我有惊喜' @click='change1()'/></div>",props:["name"],data(){return {username : this.name }},methods:{change1(){// 调用Vue实例中的函数this.$emit("find") //调用组件中传递过来的其他函数时要使用this.$emit("事件名")来调用}}}// 注册组件对象const vue = new Vue({el:"#app",data:{name: "小陈"},methods:{findAll(){//一个事件函数, 要将这个函数传递给子组件alert(this.name + ",此时调用的是Vue实例中定义的函数")}},components:{login:login //组件的注册}})</script></body></html>
小结:
我们在login组件中的template中的html代码中给其中的按钮添加了一个点击事件, 一点点击这个按钮之后就会执行login子组件中的change1()方法在change1()方法中我们又通过this.$emit(“事件名”)来让这个组件触发了对应的事件 我们的emit(“事件名”)就是用来触发对应的事件的一个方法, 我们的this在当前的场景中就是子组件, 所以就是使用子组件触发对应的事件 我们将对应执行的事件和我们的Vue中的事件方法相互绑定, 那么一点组件触发了该事件之后就会执行对应的Vue父组件中的findAll()方法那么就完成了向子组件中传递事件并在子组件中调用了该事件
核心:
其实就是我们的父组件中的方法在子组件中是调用不到的, 我们的子组件中的方法只能是和组件内部的template中的html代码区域的标签的事件相互结合 --> 因为我们的子组件的作用域其实就只有在组件的内部, 而我们的Vue则不是, 我们的Vue组件的作用范围是el属性指定的标签的内部
我们的组件使用的时候的v-on绑定的事件触发的函数就是Vue核心对象中的方法
所以我们就通过组件内部调用组件内部方法的时候让组件去调用emit()方法触发对应的事件, 那么就会有Vue对象中对应的事件方法被执行 —> 那么就做到了向子组件中传递事件并在子组件中调用该事件
补充:
子组件可以使用 $emit()方法触发父组件的自定义事件
父组件可以使用&refs对象.子组件名.子组件中的方法 的方式来在父组件中访问到子组件中定义的方法
$就是表示这是一个系统类库中的API 注意: 这个$不能省略
