为了账号安全,请及时绑定邮箱和手机立即绑定

Vue子组件与父组件之间的通信

标签:
Vue.js

1.环境搭建

  • 下载 vue-cli:npm install -g vue-cli

  • 初始化项目:vue init webpack vue-demo

  • 进入vue-demo文件夹:cd vue-demo

  • 下载安装依赖:npm install

  • 运行该项目:npm run dev

2.父组件向子组件传值

  • src/components/文件夹下建一个组件,Home.vue

  • 创建子组件,在src/components/文件夹下新建一个文件夹,在新建文件夹中新建一个组件Child.vue

在Child.vue中创建props,用于接收父组件传递的值

<template>
    <div>
        <div v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}        </div>
    </div></template><script>export default {    name: 'child',    props: {        c: Array
    }
}</script><style  scoped>
    </style>

在Home.vue中注册Child组件,并在template的div标签中添加home-child标签,标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。

<template>
  <div class="hello">
    <home-child v-bind:c="c"></home-child>
  </div></template><script>import HomeChild from '@/components/common/Child'export default {  name: 'home',  components: {
    HomeChild
  },
  data () {    return {      c:[1,2,3]
    }
  }
}</script><style scoped></style>

结果


114

12.png

3.子组件向父组件传值

给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件,并传递一个参数,这个参数就是子组件要传递给父组件的值。

<template>
    <div>
        <div v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}        </div>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </div></template><script>export default {    name: 'child',    props: {        c: Array,        data: String
    },    methods: {        ChildClick: function () {            this.$emit("ListenChild","I am child.vue")
        }
    }
}</script><style  scoped></style>

在父组件中的home-child标签中监听该自定义事件,并添加一个响应该事件的方法ShowChild。

<template>
  <div class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </div></template><script>import HomeChild from '@/components/common/Child'export default {  name: 'Home',  components: {
    HomeChild
  },
  data () {    return {      c:[1,2,3],      data: " "
    }
  },  methods: {    ShowChild: function (data) {      this.data = data      console.log("data:" + data)
    }
  }
}</script><style scoped></style>

结果:


290

13.png

点击按钮后:


291

14.png



作者:qfstudy
链接:https://www.jianshu.com/p/4a4b96d292df


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消