除了props子组件给父组件传输,还可以用自定义事件实现子组件数据向父组件传输。
第一种方式: 通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用v-on或@ 结合student.vue中的sendStudentName 的emit。 如果只能点击一次则
v-on:studentName.once
App.vue
<template>
<div id="app">
<student v-on:studentName="getStudentName"></student>
<!-- 点击 把学生名给App按钮 namestudent就会显示 -->
<h2>获取到的student中的name:{{namestudent}}</h2>
</div>
</template>
<script>
import student from './components/study/student.vue'
export default {
name: 'App',
components:{
student
},
data(){
return{
namestudent:'',
}
},
//methods里面方法可以随意调用不用在div中必须存在方法名
methods:{
//下面两个方法一样的用哪个都行
// getStudentName(name,x,y){
// console.log("App收到学生名是:",name,x,y);
// }
//...params (es6写法) 代表除name外 其他输出成一个数组
getStudentName(name,...params){
console.log("App收到学生名是:",name,params);
this.namestudent = name;
//输出 App收到学生名是: lj (2) [666, 999]
}
}
}
</script>
传输多个自定义事件:
<student v-on:studentName="getStudentName" v-on:studentName1="getStudentName1"></student>
student.vue
<template>
<div class="stu">
<button @click="sendStudentName">把学生名给App</button>
</div>
</template>
<!--组件数据交互-->
<script>
//这样写法更加简洁,这样用的多
export default {
//代表组件名称,最好与 school.vue中的school一致
name:'student',
data(){
return{}
},
methods:{
sendStudentName(){
//<student v-on:studentName="getStudentName"></student> studentName和 ‘studentName’ 同一个
this.$emit('studentName',this.name,666,999);
}
}
}
}
</script>
第二种方式:通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用ref和mounted 结合student.vue中的sendStudentName 的emit
App.vue如下 $emit写法和上面student.vue中一样
<template>
<div id="app">
<!--其实比1麻烦点,但是易于扩展,比如还可以加定时器-->
<student ref="student"></student>
<!-- 点击 把学生名给App按钮 namestudent就会显示 -->
<h2>获取到的student中的name:{{namestudent}}</h2>
</div>
</template>
<script>
import student from './components/study/student.vue'
export default {
name: 'App',
components:{
student
},
data(){
return{
namestudent:'',
}
},
//methods里面方法可以随意调用不用在div中必须存在方法名
methods:{
//...params (es6写法) 代表除name外 其他输出成一个数组
getStudentName(name,...params){
console.log("App收到学生名是:",name,params);
this.namestudent = name;
//输出 App收到学生名是: lj (2) [666, 999]
}
},
mounted(){
setTimeout(()=>{
//App.vue中this.$emit('studentName',this.name);中studentName 和下面studentName一样
//getStudentName 是methods中的getStudentName
this.$refs.student.$on('studentName',this.getStudentName)
//上面的替代。把methods里面getStudentName方法去掉。 =>函数 是没有自己的this的所以得往外找就是App的区域了那this就是App
// this.$refs.student.$on('studentName',(name,...params)=>{
// //=>{} 里面写this就是App的
// console.log("App收到学生名是:",name,params);
// //输出 App收到学生名是: lj (2) [666, 999]
// })
},3000)
}
}
</script>
特别注意:
1.如果组件里面写了@click这种dom的操作事件,组件会认为这是个自定义事件。所以要想为组件中的dom操作事件,只需要 @click.native加个native即可。
2.this.$refs.student
这里this指的是student组件并不是App,student触发则this就是student。如果是this.getStudentName getStudentName是App.vue method里面方法则这个里this就是App。如果mounted里面写的是普通function方法则这里this也是App。
3.只触发一次则this.$refs.student.$once('studentName',this.getStudentName)
再点击没反应。