Vue天禹

  2. 主页
  4. 文档
  6. Vue天禹
  8. 组件自定义事件_绑定

组件自定义事件_绑定

组件自定义事件_绑定，可以实现子给父传递数据。

组件的自定义事件：
1，在App.vue中Foot组件写自定义事件。 传自定义的事件给foot组件中，在foot的组件中接收值。
 <Foot v-on:aiguigu="Demoa"></Foot>

2，我们在 app.vue 中写 demoa的函数。
console.log("demo被调用了",this.name);

 methods: {
    GetName(name) {
      console.log("App接收到了子组件的值",name);
    },
    Demoa(){
      console.log("demo被调用了",this.name);
    }
  },

3,那我们再找到 Foot组件。
写 <button @click="getapp">FOOT 子组件传值给APP父组件。</button>
写getapp(){}  因为app.vue中绑定了自定义事件，所以我们要在子组件中触发这个自定义事件。
写getapp(){}函数，在函数中触发 this.$emit("aiguigu");
也可以写getapp(){}函数，在函数中触发 this.$emit("aiguigu"，this.name); 传值。

有了自定义的事件绑定，就不需要再使用 props:[]; 去接收数据。
直接使用 this.$emit(); 去传值。



<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>当前求和为：{{number}}</h2>
		<button @click="add">点我number++</button>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑atguigu事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
			add(){
				console.log('add回调被调用了')
				this.number++
			},
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}
		},
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

==============================================================

第二种的自定义事件的绑定写法。
App.vue 通过组件写 ref=""
<Foot ref="Foot"></Foot>

挂载完毕后：
methods:{
   getname(){
      return ;
   }
}
//挂载钩子完成后。调用
mounted:{
   this.$refs.Foot.$on("aiguigu",this.getname);
}



App.vue

<template>
  <div class="App">
    <Head></Head>
    <Main></Main>
    <Foot v-on:aiguigu="Demoa"></Foot>
    <Demo :GetName="GetName"></Demo>
  </div>
</template>

<script>
import Head from "./components/Head";
import Main from "./components/Main";
import Foot from "./components/Foot";
import Demo from "./components/Demo";

export default {
  name: "App",
  components: { Head, Main, Foot,Demo },
  data() {
    return {
		name:"footname"
	};
  },
  methods: {
    GetName(name) {
      console.log("App接收到了子组件的值",name);
    },
    Demoa(){
      console.log("demo被调用了",this.name);
    }
  },
};
</script>

<style>
</style>



<!-- <template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
    <StudentName></StudentName>
    <SchoolName></SchoolName>

		<!- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<!-- <School :getSchoolName="getSchoolName"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- <Student ref="student" @click.native="show"/>
	</div> -->
<!--
</template>

<script>
	import StudentName from './components/StudentName.vue'
	import SchoolName from './components/SchoolName.vue'

	export default {
		name:'App',
		components:{SchoolName,StudentName},
		data() {
			return {
				msg:'你好啊！',
				studentNamea:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentNamea = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style> -->
Student.vue   完整的写法。

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>当前求和为：{{number}}</h2>
		<button @click="add">点我number++</button>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑atguigu事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
			add(){
				console.log('add回调被调用了')
				this.number++
			},
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}
		},
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

1，子组件，要传参数给APP.vue 那App.vue, 要首先有一个父给子组件的methods:{}事件函数。 然后，子在合适的时侯调用父组件就可以了。使用props:[]。
父组件中，要给 子组件的标签 填加这个函数。<Demo :GetName="GetName"></Demo>

App.vue

<Demo :GetName="GetName"></Demo>

methods:{
   GetName(name){
      console.log("App接收到了子组件的值",name);
   }
}


StudentName.vue

<button @click="GetApp">传Demo.vue中的name值到App.vue里。</button>

props:['GetName']

methods:{
        GetApp(){
             this.GetName(this.name);
        } 
    }
App.vue

<template>
  <div class="App">
    <Head></Head>
    <Main></Main>
    <Foot></Foot>
    <Demo :GetName="GetName"></Demo>
  </div>
</template>

<script>
import Head from "./components/Head";
import Main from "./components/Main";
import Foot from "./components/Foot";
import Demo from "./components/Demo";

export default {
  name: "App",
  components: { Head, Main, Foot,Demo },
  data() {
    return {};
  },
  methods: {
    GetName(name) {
      console.log("App接收到了子组件的值",name);
    },
  },
};
</script>

<style>
</style>



<!-- <template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
    <StudentName></StudentName>
    <SchoolName></SchoolName>

		<!- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<!-- <School :getSchoolName="getSchoolName"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- <Student ref="student" @click.native="show"/>
	</div> -->
<!--
</template>

<script>
	import StudentName from './components/StudentName.vue'
	import SchoolName from './components/SchoolName.vue'

	export default {
		name:'App',
		components:{SchoolName,StudentName},
		data() {
			return {
				msg:'你好啊！',
				studentNamea:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentNamea = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style> -->
Demo.vue

<template>
    <div>
        <button @click="GetApp">传Demo.vue中的name值到App.vue里。</button>
    </div>
</template>

<script>
export default {
    name:"Demo",
    props:['GetName'],
    data(){
        return {
            name:"wulei",
            age:40
        }

    },  
    methods:{
        GetApp(){
             this.GetName(this.name);
        } 
    }
}
</script>

<style>

</style>
这篇文章对您有用吗？ 是 否

我们要如何帮助您？