vue--day45---组件的自定义指令
1.App.vaule
<template>
<div >
<h1>{{ msg }}</h1>
<!--通过父组件给子组件传递函数的props 实现 子给父传数据-->
<School :receiveSchoolName="receiveSchoolName"></School>
<!-- v-on 在student 组件标签上 所以说是在给 student组件的实例对象vc 上绑定事件,事件名字是smytest
有人触发了这个事件，receiveStuedntName 函数就会被调用
-->
<!--通过父组件给子组件绑定一个自定义事件实现 子给父传数据 第一种写法 使用@ 或者v-on -->
<!-- <Student v-on:smytest="receiveStuedntName"></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);
}
},
mounted(){
//this.$refs.student.$on('smytest',this.receiveStuedntName)
setTimeout(()=>{
this.$refs.student.$on('smytest',this.receiveStuedntName)
//触发一次
// this.$refs.student.$once('smytest',this.receiveStuedntName)
})
}
2. School.vue
<template>
<!-- 组件的介绍 -->
<div class="school">
<h2>学校名称{{name}}</h2>
<h2>学校地址{{address}}</h2>
<button @click="sendSchoolName"> 点我将学校名称送给APP</button>
</div>
</template>
<script>
export default {
name:"School",
props:['receiveSchoolName'],
data() {
return {
name: "洛阳理工",
address: "洛阳"
};
},
methods: {
sendSchoolName() {
this.receiveSchoolName(this.name)
},
},
}
</script>
<style scoped>
/* 组件的样式 */
.school{
background-color:orange;
margin-top: 20px;
}
</style>
3. Student.vue
<template>
<div class="student">
<h2>学生姓名{{name}}</h2>
<h2>学生性别{{sex}}</h2>
<button @click="sendStudentName">点我将学生名字传递给App</button>
</div>
</template>
<script>
export default {
name:"Student",
data() {
return {
name:"张三",
sex:'男'
}
},
methods: {
sendStudentName(){
// 触发Student 组件实例对象上的 smytest 事件
// 如果参数过多 1.可以把数据封装为对象
// 2. this.$emit('smytest',this.name,99999,8888,4444)
this.$emit('smytest',this.name,99999)
}
},
}
</script>
<style scoped>
/* 组件的样式 */
.student{
background-color:cadetblue;
}
</style>
}
</script>
<style scoped>
</style>
