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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值