查看vue 版本 命令 npm list vue
1. App.vue
<template> <div > <h1>{{ msg }}</h1> <!--通过父组件给子组件传递函数的props 实现 子给父传数据--> <School :receiveSchoolName="receiveSchoolName"></School> <!-- v-on 在student 组件标签上 所以说是在给 student组件的实例对象vc 上绑定事件,事件名字是smytest 有人触发了这个事件，receiveStuedntName 函数就会被调用 --> <!--通过父组件给子组件绑定一个自定义事件实现 子给父传数据 第一种写法 使用@ 或者v-on --> <Student v-on:smytest="receiveStuedntName" @demo="m1"></Student> <!--触发一次--> <!-- <Student v-on:smytest.once="receiveStuedntName"></Student> --><!--通过父组件给子组件绑定一个自定义事件实现 子给父传数据 第二种写法 使用ref--> <!-- <Student ref="student"></Student> --> </div> </template>
<script> //样式的引入和这里有关系 import School from './components/School.vue'; import Student from './components/Student.vue';
export default { name: 'App', components: { School, Student, }, data(){ return { msg:"欢迎学习vue" } },
methods:{ receiveSchoolName(schoolName){ console.log("app组件收到了学校的名字信息",schoolName); },
//receiveStuedntName(studentName,...a){ 接收多个参数，第一个参数 后面的几个参数全部封装为数组 receiveStuedntName(studentName){ console.log("app组件收到了学生的名字信息",studentName); }, m1(){ console.log("demo事件被触发了"); }
}, // mounted(){ // //this.$refs.student.$on('smytest',this.receiveStuedntName)
// setTimeout(()=>{
// this.$refs.student.$on('smytest',this.receiveStuedntName) // //触发一次 // // this.$refs.student.$once('smytest',this.receiveStuedntName)
// }) // }
} </script>
<style scoped>
</style> 2.Student.vue <template> <div class="student"> <h2>学生姓名{{name}}</h2> <h2>学生性别{{sex}}</h2> <h2>当前求和为{{number}}</h2> <button @click="add">点我number++</button> <button @click="sendStudentName">点我将学生名字传递给App</button>
<button @click="unbind">解绑自定义事件</button> <button @click="death">销毁当前student组件的实例</button> </div> </template>
<script>
export default { name:"Student", data() { return { name:"张三", sex:'男', number:0 } },
methods: { add(){ console.log("add函数被调用了"); this.number++; }, sendStudentName(){ // 触发Student 组件实例对象上的 smytest 事件 // 如果参数过多 1.可以把数据封装为对象 // 2. this.$emit('smytest',this.name,99999,8888,4444) this.$emit('smytest',this.name,99999) this.$emit('demo') }, unbind(){ //this.$off('smytest')//解绑一个自定义事件 this.$off(['smytest','demo']) //解绑多个个自定义事件 //this.$off()// 解绑所有自定义事件 }, death(){ this.$destroy();// 销毁了当前student组件实例,销毁后所有的student 实例的自定义事件全都不奏效 }, }, } </script>
<style scoped> /* 组件的样式 */ .student{ background-color:cadetblue; }
</style>
标签：vue,自定义,--,student,组件,解绑,smytest From： https://www.cnblogs.com/satisfysmy/p/17583778.html