Vue必学知识.png
话不多说，源码地址： https://github.com/Gitsifu/vue-learn
目录：
1.v-bind的使用
2.v-on和$emit()的使用
3.$on()和$emit()的使用
1.v-bind使用:
子组件：
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: 'child',
components: {},
props: {
msg: {
require: false,//是否必须传入
type: String,//类型
default: ''//如果不传入时的默认值
}
},
data() {
return {}
},
methods: {},
mounted() {
}
}
</script>
<style scoped>
</style>
父组件：
<template>
<div>
<h1>父组件传值给子组件demo：</h1>
<div>方式一：</div>
<child v-bind:msg="massage"></child>
<div>方式二：</div>
<child msg="2.这个是父组件的数据"></child>
</div>
</template>
<script>
import Child from "./child";
export default {
name: 'father',
components: {Child},
props: [],
data() {
return {
massage: "1.这个是父组件的数据"
}
},
methods: {},
mounted() {
}
}
</script>
<style scoped>
</style>
效果图：
image.png
2.v-on与$emit("eventName",...)使用
子组件：
<template>
<div>
<button v-on:click="test">点我一下</button>
</div>
</template>
<script>
export default {
name: 'child',
components: {},
props: [],
data() {
return {}
},
methods: {
test(){
//第一个参数是事件名称
this.$emit('event','这个是事件触发后发送的数据，v-on的回调函数参数接收');
}
},
mounted() {
}
}
</script>
<style scoped>
</style>
父组件：
<template>
<div>
<child v-on:event="clickButton"></child>
<div>{{msg}}</div>
</div>
</template>
<script>
import Child from "./child";
export default {
name: 'father',
components: {Child},
props: [],
data() {
return {
msg: '这个是原始数据'
}
},
methods: {
clickButton(data) {
this.msg = data;
}
},
mounted() {
}
}
</script>
<style scoped>
</style>
效果图：下载源码看效果吧。
3.$on()和$emit()的使用
<template>
<div>
<button v-on:click="clickFunc">点击一下</button>
</div>
</template>
<script>
export default {
name: 'on-emit',
components: {},
props: [],
data() {
return {}
},
methods: {
clickFunc() {
this.$emit('eventName', '这个是数据啦！！！')
}
},
//在创建时执行，并监听 ‘eventName’事件,$on这个方法监听本组件中的事件一般都都是写在created生命周期函数里
created() {
this.$on('eventName', function (data) {
alert('监听eventName事件收到了数据：\n' + data)
})
},
mounted() {
}
}
</script>
<style scoped>
</style>
效果下载源码看。
解释：
v-bind用于父组件传递数据给子组件。子组件通过props进行接收。props中的变量使用和data(){return{}}中的使用方式一样。
v-on与$emit：
v-on用于监听子组件通过执行$emit触发的事件。
$on与$emit:
$on用于监听自身组件中执行$emit触发的事件。（$on监听一般写在created生命周期函数中）
