精华内容
下载资源
问答
  • 主要给大家介绍了关于VUE子组件向父组件传值(含传多值及添加额外参数场景)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 父组件这么写 <component v-on:child-say=listenToMyBoy></component> <p>Do you like me? {{childWords}} methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子组件component-...
  • 现在在组件中,通过网络请求,拿到问答信息,想要放到对话框里,就需要用到vue组件向父组件传值,大概分为2步 一、在组件中自定义事件 在组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该...

    父组件index,子组件question,
    在这里插入图片描述
    下图的对话框,对话内容socketOptions是定义在父组件中的,对话框的内容,都是通过websocket推送过来的,
    在这里插入图片描述

    现在在子组件中,通过网络请求,拿到问答信息,想要放到对话框里,就需要用到vue的子组件向父组件传值,大概分为2步

    一、在子组件中自定义事件

    在子组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该命令可以传递多个参数:

    第一个参数是自定义事件的名字,是必须的,
    后面的参数是从子组件传递给父组件的数据,是可选的。要传递几个数据,就将这几个数据作为参数放进该命令中。
    例如,在子组件中自定义一个getAns事件,通过该事件向父组件传递两条数据,问题和答案,如下:
    在这里插入图片描述

    二、在父组件中注册该事件,并绑定父组件中的方法,接收数据

    在子组件中完成自定义事件之后,我们就可以在父组件中注册该事件,并绑定到父组件中的一个方法,在该方法中,接收子组件中传递过来的数据。
    首先、父组件肯定要注册子组件、这个就不说了

    父组件中用到了子组件的地方,注册子组件中的getAns事件,绑定receive方法
    在这里插入图片描述
    在父组件中的methods里面实现receive方法,把子组件中的参数赋给socketOptions,就能展示了
    在这里插入图片描述
    如图:
    在这里插入图片描述

    写的比较乱,这里附上参考的链接:Vue笔记——子组件向父组件传递数据

    展开全文
  • vue子组件向父组件传值的方法

    万次阅读 多人点赞 2019-05-25 13:28:38
    组件向父组件,使用$emit方法,demo: 组件的代码: <template> <div> <h1>this is child component</h1> <...向父组件传值</button> </div> ...

    子组件向父组件,使用$emit方法,demo:

    子组件的代码:

    <template>
        <div>
            <h1>this is child component</h1>
            <button @click="toParent">向父组件传值</button>
        </div>
    </template>
    
    
    <script>
    export default {
        data() {
            return {
                data1: '子组件的数据'
            }
        },
        methods: {
            toParent:function() {
                this.$emit('event1', this.data1)
            }
        }
    }
    </script>
    
    <style scoped>
        div {
            border: 1px solid red;
        }
    </style>
    

    父组件的代码:

    <template>
        <div>
            {{ newData }}
            <child @event1="change($event)"></child>
            
        </div>
    </template>
    
    
    <script>
    import child from './child'
    export default {
        data() {
            return {
                newData: '这是父组件的数据'
            }
        },
        methods: {
            change(data) {
                this.newData = data;
            }
        },
        components: {child}
    }
    </script>
    
    <style>
    
    </style>
    

    代码解释:

    1、在子组件中,首先需要使用$emit方法,该方法接收2个参数,第一个参数是事件的名称,自己随意定义。第二个参数是需要传递的数据,可以是对象,也可以是字符串类型。$emit是VUE实例中的一个方法,所以前面要加上this,可以在钩子函数中执行,也可以由某个事件触发执行。

    2、在父组件中,程序会查找刚才在子组件中注册的事件名,该事件又有一个方法change,change方法将newData的值改变了。

     

    传值之前:

    传值之后:

     

     

     

     

     

    展开全文
  • VUE子组件向父组件传值的两种方法

    万次阅读 2020-12-24 11:13:43
    一,子组件主动触发事件将数据传递给父组件 1,在子组件上绑定某个事件以及事件触发的函数 子组件代码 <template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> &...

    ps:写给自己看的,有问题留言
    一,子组件主动触发事件将数据传递给父组件
    1,在子组件上绑定某个事件以及事件触发的函数
    子组件代码

    <template>
    <div>
    <Tree :data="treeData" show-checkbox ref="treeData"></Tree>
    
    <Button type="success" @click="submit"></Button>
    </div>
      
    </template>
    

    事件在子组件中触发的函数

          submit(){
            this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
          },
    

    2,在父组件中绑定触发事件

    <AuthTree  @getTreeData='testData'>
    </AuthTree>
    

    父组件触发函数显示子组件传递的数据

    testData(data){
          console.log("parent");
          console.log(data)
        },
    

    控制台打印的数据
    在这里插入图片描述
    二,不需要再子组件中触发事件(如点击按钮,create()事件等等)
    这种方式要简单得多,
    1,子组件中绑定ref

    <template>
    <div>
    <Tree :data="treeData" show-checkbox ref="treeData"></Tree>
    </div>
      
    </template>
    
    

    然后在子组件中定义一个函数,这个函数是父组件可以直接调用的。函数的返回值定义为我们需要的数据。

    getData(){
            return this.$refs.treeData.getCheckedNodes()
        },
    
    

    然后再父组件注册子组件后绑定ref,调用子组件的函数获取数据

    <AuthTree ref="authTree">
              </AuthTree>
    

    父组件函数调用

    console.log( this.$refs.authTree.getData());
    
    展开全文
  • Vue子组件向父组件传值的几种方式

    千次阅读 2019-06-24 14:57:34
    1.子组件: <template> <div> <slot name="icon" :text="text"></slot> </div> </template> <script> export default{ data(){ return {...

    一. 使用slot插槽

    1.子组件:

    <template>
      <div>
        <slot name="icon" :text="text"></slot>
      </div>
    </template>
    <script>
      export default{
        data(){
          return {
            text:"我是子组件"
          }
        }
      }
    </script>
    

    2.父组件:

    <template>
      <div id="app">
        <child>
          <div slot="icon" slot-scope="props">
            {{props.text}}
          </div>
        </child>
      </div>
    </template>
    

    在父组件中 通过slot 便能获取子组件的text值

    二.使用ref属性

    1.子组件:

    <template>
      <div>
          {{ msg }}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: "hello world"
        }
      }
    }
    </script>

    2.父组件:

    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          console.log(this.$refs.hello.msg)
        }
      }
    };
    </script>

    父组件中通过$.refs便可以获取子组件传来的值。

    三.使用$.emit

    1.子组件:

    <template>
      <div id="translate-form">
          <form>
              <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
              <select>
                  <option value="en">English</option>
              </select>
              <input type="submit"  value="翻译"  v-on:click="formSubmit">
        </form>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TranslateForm',
      data:function(){
          return{
              textToTranslate:'',
          }
      },
      methods: {
          formSubmit: function(e){
              this.$emit('formSubmit', this.textToTranslate); //父组件监听的名字必须是formSubmit
              e.preventDefault();
          }
      }
    }
    </script>

    2.父组件:

    <template>
      <div id="app">
          <h1>在线翻译</h1>
        <h5>简单 / 易用 / 便捷</h5>
       <TranslateForm v-on:formSubmit='translateText'></TranslateForm>
      </div>
    </template>
    
    <script>
    import TranslateForm from './components/TranslateForm'
    
    export default {
      name: 'App',
      components:{
          TranslateForm
      },
      methods:{
          translateText:function(text){
              alert(text)
          }
      }
    }
    </script>

     

    展开全文
  • vue子组件向父组件传值----$emit

    千次阅读 2018-08-10 10:03:43
    组件向父组件传值可以使用 $emit()  我的理解是组件通过$emit方法把自己的第一个参数eventName传递给父级,父级把eventName当成一个事件,触发这个事件接收子级传给自己的数据或执行操作 $emit ( eventName...
  • prop 作为初始值传入后,子组件想把它当作局部数据来用; prop 作为初始值传入,由子组件处理成其它数据输出。 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['...
  • 主要介绍了vue 组件间的通信之组件向父组件传值的方式总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下
  • 一、子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change=...
  • 组件向父组件传值实现组件控制组件dialog的显示 组件:child.vue <template> <div @click="add"></div> </template> methods: { add() { //触发showDialog,所传的值为false ...
  • 组件如何给子组件传值 使用props 举个例子: 组件:fromTest.vue组件 app.vue fromTest.vue <h2>{{title}}</h2> //title必须是组件传递的 [removed] export default (){ props:[title] //可以是数组...
  • 方法二:组件向父组件传值 $emit 1.组件中data中的属性想要传递给组件 2.组件methods中定义一个方法,向父组件发射一个方法,并携带参数(data中想要传递给组件的) 3.组件引用组件时绑定子组件...
  • 父组件:&lt;head @getChild = "hidePanel"&gt;&lt;/head&gt;在methods里加上hidePanel(data){//进行操作 }子组件: &lt;li&gt; &lt;a href ='javascript:void(0)' @...
  • 主要介绍了Vue父组件向子组件传值以及data和props的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue子组件向父组件传值(详讲)

    千次阅读 2019-06-08 21:04:59
      之前分享过vue的生命周期及组件之间的通信,但是理论与实践还是有很大的区别的,所以今天来实践一波组件向父组件传值的具体过程。 过程   1.首先建立组件:   1)在components下面建立文件夹getip,在...
  • 一般来说在vue的数据传递是在父组件子组件通过属性来传,子组件父组件通过事件来传值。 1. 子组件通过通过this.$emit()的方式将值传递给父组件; 2. 通过vuex来传递组件间的数据; 3. 通过中央总线来传递组件间...
  • Vue子组件给父组件传值 需要使用自定义事件 流程: 1.组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给组件 3.组件在组件上监听emit定义的事件名称并绑定自身的函数,在...
  • 组件 <view class="dropDown-item" v-for="(item,index) in comState" :key="index" @tap="changeCurrentState(item)">... // 向父组件传值 this.$emit('state',val); }, 页使用组件 <view class
  • vue 组件向父组件传值 组件: 组件接收使用: 使用
  • 我们需要做的只是让子组件改变父组件状态的代码更容易被区分,从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 ...
  • 组件使用this.$emit()向父组件传值 首先必须在组件中引用组件,然后实现传值 - 第一步 在组件中引入组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,182
精华内容 12,472
关键字:

vue子组件向父组件传值

vue 订阅