定义一个组件
<template>
<div>
<span @click="clickMe">{{name}}</span>
</div>
</template>
<script>
export default {
data(){
return{
name : 'tom'
}
},
methods:{
clickMe(){
alert('you click me');
}
},
created() {
console.log('created');
},
}
</script>
子组件
index.vue
<template>
<div>
hello,<secondComponent/>
</div>
</template>
<script>
import secondComponent from "./secondComponent";
export default {
components:{
secondComponent
}
}
</script>
secondComponent.vue
<template>
<div>{{name}}</div>
</template>
<script>
export default {
data(){
return{
name : 'marry'
}
}
}
</script>
<style scoped>
*{color: red;}
</style>
1、import
2、components注册
3、在template使用
父组件与子组件的数据传递
父传子
index.vue
<template>
<div>
<secondComponent :age="age"/>
</div>
</template>
<script>
import secondComponent from "./secondComponent";
export default {
components:{
secondComponent
},
data(){
return {
age : 18
}
}
}
</script>
secondComponent.vue
<template>
<div>{{name}} {{age}}</div>
</template>
<script>
export default {
props: ['age'],
data(){
return{
name : 'marry'
}
},
created(){
console.log(this.age);
}
}
</script>
子传父
index.vue
<template>
<div>
<secondComponent @getMyName="get"/>
</div>
</template>
<script>
import secondComponent from "./secondComponent";
export default {
components:{
secondComponent
},
methods:{
get(e){
console.log(e);
}
}
}
</script>
secondComponent.vue
<template>
<div>{{name}}</div>
</template>
<script>
export default {
data(){
return{
name : 'marry'
}
},
created(){
this.$emit('getMyName', this.name);
}
}
</script>
兄弟组件传值
1、新建一个文件,编写以下内容
import Vue from 'vue';
export default new Vue();
2、编写2个组件,然后引入同一个vue文件中
<template>
<div class="hello">
<testA/>
<testB/>
</div>
</template>
<script>
import testA from './testA';
import testB from './testB';
export default {
components : {
testA,
testB
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>
3、现在testA组件向testB组件发送数据
<template>
<div class="testA">
testA
</div>
</template>
<script>
import hub from '../config';
export default {
data () {
return {
msg : 'abc'
}
},
mounted(){
hub.$emit('msg',this.msg); //testA用$emit发送数据
}
}
</script>
<style scoped>
</style>
<template>
<div class="b">
b
</div>
</template>
<script>
import hub from '../config';
export default {
data () {
return {
}
},
created(){
hub.$on('msg',(val)=>{ //testB用on事件接受数据
alert(val)
});
}
}
</script>
<style scoped>
</style>
ps :需要注意的是一定要先触发on事件在执行emit事件,所以testA的emit事件写在了mounted钩子函数里