HafuHafu

  • 首页
  • 技术
    • 编程
    • 教程
  • 资源
  • 综合
    • 杂谈
  • ACG
    • Anime & Comic
    • Game
  • 用户中心
    • 登录
  1. 首页
  2. 编程
  3. 正文

Vue.js中父组件获取子组件属性以及子组件传递属性给父组件

2019-03-17 1741点热度 1人点赞 7条评论

目录

  • 如何传递?
    • 父组件代码
    • 子组件代码
    • 最终效果

如何传递?

首先先定义好父组件和子组件,然后在父组件中引入子组件,并使用标签。
然后在父组件中的子组件标签中使用引用ref=引用名来确定想要引用的子组件,之后在父组件中就可以用this.$refs.引用名的形式获取子组件实例,this.$refs.引用名.属性名的形式获取子组件的属性。
而子组件想要主动传值给父组件,需要在子组件中使用this.$emit(事件名称,想要传递的值)来声明想要传递的值和事件名称,然后在父组件的子组件标签上使用@事件名称=函数名称来监听事件,并在methods中用对应函数名称的函数来接收,其参数data就是传递来的值。

父组件代码

<template>
  <div>
    <div style=background-color:#55FF22>
      <span>这是父组件</span><br>
      <span>获取到的子组件的值为:{{pmsg}}</span><br>
      <button @click=getcmsg>获取子组件中的值</button>
    </div>
    <childdiv ref=childref @parentEvent=showMsgFromChild></childdiv><br>
    <span>子组件主动传来的值为:{{msgfromchild}}</span>
  </div>
</template>
<script>
import child from ./Child;
export default {
  data(){
    return{
      pmsg:,
      msgfromchild:
    }
  },
  components: {
    childdiv: child
  },
  methods:{
    getcmsg:function(){
      this.pmsg  = this.$refs.childref.cmsg;
    },
    showMsgFromChild:function(data){
      this.msgfromchild = data
    }
  }
};
</script>

子组件代码

<template>
  <div>
    <span>这是子组件</span><br>
    <span>子组件中cflag的值为:{{cmsg}}</span>
    <button @click=sendtop>主动传递属性给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cmsg: ' from child 父组件请求',
      toparent: 'from child主动传递'
    };
  },
  methods:{
    sendtop:function(){
        this.$emit(parentEvent,this.toparent);
    }
  }
};
</script>

最终效果

父子组件传值

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: Vue
最后更新:2021-08-23

hafuhafu

将思绪寄托于流逝而过的日子里。

点赞
下一篇 >

文章评论

  • 114514

    你是岛民吗?

    2019-04-06
    回复
    • hafuhafu

      @114514 只有岛上才有岛民

      2019-04-06
      回复
      • ATM

        @hafuhafu 你是bog吗

        2019-04-06
        回复
        • hafuhafu

          @ATM 我是鸟卫乒

          2019-04-06
          回复
          • A哥不要啊

            @hafuhafu 菜鸡前端交流群(目前就2个岛民) 来商业互吹啊

            2019-04-06
          • hafuhafu

            @A哥不要啊 自闭儿童好慌啊

            2019-04-10
  • 迪奥

    昨天想着注册这个域名来着,一查发现已经被你得手了。真是可恶!

    2019-04-07
    回复
  • 取消回复

    hafuhafu

    将思绪寄托于流逝而过的日子里。

    文章目录
    • 如何传递?
      • 父组件代码
      • 子组件代码
      • 最终效果

    COPYRIGHT © 2022 HafuHafu. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang