09、组件

定义一个组件

<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钩子函数里