vue子组件向父组件传递数据

子组件
<template>
    <div id="header">
      <input type="text" v-model="username" @change="setUser">
    </div>

</template>

<script type="text/ecmascript-6">
    export default{
        props: {
        },
        data()
        {
            return {
                username:‘‘
            }
        },
        created() {

        },
        methods: {
            setUser:function () {
              this.$emit(‘transferUser‘,this.username);
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
父组件
<template>
  <div id="app">
    <v-header @transferUser="getUser"></v-header>
    <div>用户名{{user}}</div>
  </div>

</template>

<script type="text/ecmascript-6">
  import header from ‘components/header/header.vue‘;

  export default{
        props: {},
        data()
        {
            return {
              user:‘‘
            }
        },
        created() {

        },
        methods: {
            getUser(msg){
                this.user=msg;
            }

        },
        components: {
            ‘v-header‘:header,
        },
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
时间: 2024-12-23 13:41:47

vue子组件向父组件传递数据的相关文章

Vue子页面给父页面传递数据

子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递到父页面</button> </div></template> <script> export default { name: 'child', data() { return { msg:'子组件数据' } }, computed:{ addNum(){ re

子窗口向父窗口传递数据

父窗口: 子窗口: 点击"Form1"对话框上的"Form2"按钮后弹出"Form2"对话框,在输入框中输入"1111111",关闭对话框"Form2"时将值赋给"Form1"上的输入框中. 实现代码如下: public partial class Form1 : Form { public void SetValue(string sStr) { textBoxX1.Text = sS

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

vuejs子组件向父组件传递数据

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="

vue系列(一)子组件和父组件

父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top"> <span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{ite

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

Vue 子组件传父组件

vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用this.$emit的方法来传. saves () { localStorage.setItem('note', this.note); this.h1 = localStorage.getItem('note'); console.log(this.h1) // this.conShow = true

2.Vue子组件给父组件通信

子组件给父组件通信 如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的 子组件: <template> <div @click='upData'></div> </template> <script type="text/javascript"> export default { data () { return { ms