vue父子通信

简介: 转载自: https://www.jianshu.com/p/649929d88699父组件给子组件传递信息子组件通过props接收来自父组件的信息 父组件 import ChildOne from '.

转载自: https://www.jianshu.com/p/649929d88699

父组件给子组件传递信息

子组件通过props接收来自父组件的信息

<!--父组件-->
<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是来自父组件的消息',
      };
    },
  };
</script>
<style scoped>
</style>


<!--子组件-->
<template>
  <div>
    <h3>我是子组件一</h3>
    <span>{{parentMessage}}</span>
  </div>
</template>
<script>
  export default{
    props: ['parentMessage'],
  };
</script>
<style scoped>
</style>

子组件向父组件传递信息

子组件可以通过$emit('自定义事件名称', 数据)向父组件传递信息

<!--父组件-->
<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是来自父组件的消息',
      };
    },
    methods: {
      parentMethod() {
        alert(this.parentMessage);
      },
    },
  };
</script>
<style scoped>
</style>

<!--子组件-->
<template>
  <div>
    <h3>我是子组件一</h3>
  </div>
</template>
<script>
  export default{
    mounted() {
      this.$emit('childEvent');
    },
  };
</script>
<style scoped>
</style>

父子组件双向绑定

目录
相关文章
|
1天前
|
JavaScript
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
12 2
|
1天前
|
存储 消息中间件 JavaScript
vue组件传值的12种方式
【10月更文挑战第1天】
12 1
|
1天前
|
缓存 JavaScript 前端开发
qiankun 微应用vue接入到基座
【10月更文挑战第4天】
|
1天前
|
JavaScript 开发者
|
1天前
|
前端开发 JavaScript 开发者
|
1天前
|
缓存 监控 JavaScript
如何提高 Vue Render 函数的性能?
【10月更文挑战第4天】
9 0
|
1天前
|
JavaScript
|
1天前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第4天】
8 0
|
1天前
|
存储 JSON JavaScript
Vue基本学习
Vue基本学习
7 0
|
1天前
|
JavaScript
【有手就行系列】Vue快速入门案例
【有手就行系列】Vue快速入门案例
7 0