精华内容
下载资源
问答
  • 将该变量的类型设定为被引用组件的类名(class 后面的那个单词),如注释B中所释代码 调用该变量,采用变量名+“." 的方式调用该变量内的方法,如注释C中所释代码。 import {Component, OnInit, ViewChild} from ...

    步骤:

    1. 设置一个变量,将其用 ViewChild装饰,
    2. 将该变量的类型设定为被引用组件的类名(class 后面的那个单词),如注释B中所释代码
    3. 调用该变量,采用变量名+“." 的方式调用该变量内的方法,如注释C中所释代码。
    import {Component, OnInit, ViewChild} from "@angular/core";
    import {FormComponent} from "../../../../core/_component/form.component";
    import {EntityFormComponent} from "../../../../core";
    
    @Component({
        selector: 'app-set-password',
        template: `
            <div #passWordForm
                 class="tab-pane app-entity-form" <!--A:app-entity-form为被引用的组件-->
             >
            </div>
            <ng-template #pwdBtnGroupTemplate>
                 <button type="button" class="btn btn-primary"
                     (click)="$onSubmitPwd($event);">保存
                 </button>
            </ng-template>
        `
    })
    export class SetPasswordComponent extends FormComponent implements OnInit{
    
    
        @ViewChild('pwdBtnGroupTemplate')
        pwdBtnGroup: TemplateRef<any>;
    
        @ViewChild('passWordForm')
        passWordForm: EntityFormComponent;//B:将该被引用组件定义为一个变量
    
        constructor() {
    
        }
    
        ngOnInit() {
        }
    
        $onSubmitPwd($event) {
            this.passWordForm && this.passWordForm.$onSubmit($event); // C:调取被引用组件内的方法
        }
    }

    //被引用组件

    export class EntityFormComponent extends FormComponent implements OnInit, OnChanges {
    
         constructor() {
    
        }
    
    
        $onSubmit($event?) {
          console.log($event);
        }
    
        
    }
    

     

    展开全文
  • vue19-获取组件引用 ref

    千次阅读 2018-09-24 12:09:41
    第三个div是上面两个div数字的和,我们做的效果就是上面两个div数字增加时,获取两个组件,显示到第三个div标签中。 (当ref在html标签上时,是对dom的引用,当ref在组件上时,是对组件引用) this.$...

    下面代码是一个计数器的功能,首先看下面代码:

    <!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                <div ref="one" is="counter" @sumadd="handlerAdd"></div>
                <div ref="two" is="counter" @sumadd="handlerAdd"></div>
                <div>{{sum}}</div>
            </div>
    
    
            <script>
                Vue.component("counter",{
                    template:'<div @click="handlerClick">{{count}}</div>',
                    data: function(){
                        return {
                            count:0
                        }
                    },
                    methods:{
                        handlerClick: function(){
                            this.count++;
                            this.$emit("sumadd");
                        }
                    }
                })
    
                var vm = new Vue({
                   el:"#root",
                   data:{
                       sum:0
                   },
                   methods:{
                    handlerAdd: function(){
                        this.sum= this.$refs.one.count+this.$refs.two.count;
                    }
                   }
                
                })
    
            </script>
        </body>
    </html>

     

    我们定义了一个组件counter,在html中两个div标签对组件做了引用,一个ref设置one,一个ref设置为two。

    第三个div是上面两个div数字的和,我们做的效果就是上面两个div数字增加时,获取两个组件的值,显示到第三个div标签中。

    (当ref在html标签上时,是对dom的引用,当ref在组件上时,是对组件的引用)

    this.$refs.ref就是对组件的引用,我们拿到两个组件的count的和,赋值给父组件的sum.

     

    展开全文
  • 组件引用 尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。 为此可以使用 ref 为子组件指定一个引用 ID。例如: &lt;div id="parent"&gt; &lt;user-profile ref=&...
    参考文档
    子组件引用
    
    尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。
    为此可以使用 ref 为子组件指定一个引用 ID。例如:
    
    <div id="parent">
      <user-profile ref="profile"></user-profile>
    </div>
    var parent = new Vue({ el: '#parent' })
    
    // 访问子组件实例
    var child = parent.$refs.profile
    
    当 ref 和 v-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对
    应的子组件。
    $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接
    操作子组件的
    应急方案——应当避免在模板或计算属性中使用 $refs。
    
    具体使用方法:
    

    在父组件中 我现在在 app.vue中

    
    <template>
      <div id="app">
        {{ a }}
        <button @click="getchild">通过ref得到子组件的值</button>
        <!-- 使用组件 -->
        <three ref="mesage"/>
      </div>
    </template>
    <script>
    
    
    import three from './components/three'
    
    export default {
      components:{
        three,
      },
      data(){
        return {
          a:'我是父组件',
        }
      },
      methods:{
        getchild(){
    	   // 通过this.$refs调用
          console.log(this.$refs.mesage.mes)
        }
      }
    }
    </script>
    
    
    

    子组件three.vue

    <template>
        <div class="three">
            {{mes}}
        </div>
    </template>
    
    <script>
    	export default {
    	  data() {
    	    return {
    	        mes:'666'
    	    };
    	  }
    	};
    </script>
    
    
    
    展开全文
  • 组件主动获取组件的数据和方法 1.调用子组件的时候 定义一个ref &lt;headerchild ref="headerChild"&gt;&lt;/headerchild&gt; 2.在父组件里面通过 this.$refs.headerChild....

    父组件主动获取子组件的数据和方法

    1.调用子组件的时候 定义一个ref

    <headerchild ref="headerChild"></headerchild>

    2.在父组件里面通过

    this.$refs.headerChild.属性
    this.$refs.headerChild.方法

    子组件主动获取父组件的数据和方法

    在子组件里面通过

    this.$parent.属性
    this.$parent.方法

    演示代码:

    //父组件
    <template>
      <div id="header">  
        <headerchild ref="headerChild"></headerchild>
        <button @click="getChild()">父组件获取子组件的数据和方法</button>
      </div>
    </template>
    <script>
    import HeaderChild from './HeaderChild'
    export default {
      data () {
          return {
              title:'我是父组件的数据'
          }
      },
      methods: {
         getChild (){
             console.log(this.$refs.headerChild.name)
         },
         run (){
             console.log("我是父组件里面的方法")
         }
      },
      components: {
          'headerchild': HeaderChild
      }
    }
    </script>
    <style lang="sass" scoped>
    
    </style>
    //子组件
    <template>
      <div id="headerchild">
          <button @click="getParent()">获取父组件的数据和方法</button>
      </div>
    </template>
    <script>
    export default {
      data () {
          return {
              name:'我是子组件里面的数据'
          }
      },
      methods:{
          getParent(){
              console.log(this.$parent.title) /*获取整个父组件*/
              this.$parent.run()/*获取父组件的方法*/
          }
      },
      props:['title','run','home'] /*通过props接收父组件传递过来的数据 */
    }
    </script>
    
    
    
    展开全文
  • 首先input的是个变量,需要在子组件的data中定义声明变量value。 input子组件: <script> export default { name: 'Input', data () { return { value: '' } } } </script...
  • 业务场景: 活动页面维护产品,选择产品时没有要选择的产品跳转产品维护页,保存后回到选择产品页面刷新产品列表显示最新维护的产品。 1、选择活动产品 2、选择商品页面没有要选择的商品时,点新建... //引用组件 ...
  • ElementUI获取组件验证结果

    千次阅读 2018-03-07 19:26:53
    最近项目中遇到父组件需要获取组件(表单)的验证结果的需求,特整理如下: ​ 尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给...
  • Vue中 $refs 获取DOM元素和组件引用

    千次阅读 2019-03-13 11:57:58
    说明: vm.$refs 是一个对象,拥有已注册过 ref...注意: 如果获取的是一个子组件,通过 ref 就能获取到子组件中的 data 和 methods 添加 ref 属性 &lt;div id='app'&gt; &lt;input type="butto...
  • 组件获取组件中的数据与方法 1.调用子组件的时候,通过设置ref <Child ref="child"></Child> 2.在父组件中通过 this.$refs.child.属性 //this.$refs 获取组件中的内容 this.$refs.child.方法 父...
  • 实现封装一个折线图,折线图选择下拉框,获取下拉框点击的并且传给父组件根据下拉框筛选的条件更新视图;效果图如下: 父组件代码: 代码解析:父组件 Parent 引用组件 Sub ,传递了 list 组件给子组件,并且...
  • 通过父组件来调用子组件方法的常用处理方法 代码理解简单 照猫画虎即可 export default class Parent extends Component { render() { return( <div> <Child onRef={this.onRef} /> ...
  • Vue 子组件修改父组件值的解决方法

    千次阅读 2020-10-21 22:51:30
    但我们可能会遇到,需要在子组件修改父组件值的需求,这里介绍三种方法实现: 实现 方法一:通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改 子组件:接受父组件传来的cateId值,但是子组件
  • 问题情景:子组件props引用组件data属性,在父组件的方法中修改data属性,porps未同步更改。 子组件props的B(默认1),引用 data属性中的A (默认是0) B为倒计时的分钟,子组件方法B(开始倒计时) ...
  • (父组件通过局部变量获取组件引用,主动获取组件的方法) 1.在子组件里cart.component.ts里定义一个方法: cartRun () { alert(“这是购物车子组件里的方法”) } 2.在父组件produc.component.html里的子...
  • Vue组件跨层级获取组件实例

    千次阅读 2019-05-30 14:09:46
    this.$parent 访问父实例 this.$children 当前实例的直接子组件。(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 ...只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给...
  • react中父组件一键获取组件数据

    千次阅读 2019-07-11 10:38:12
    通常我们在写页面的时候,会碰到页面内容较多,需要分组件来写的情况,这样就会碰到下面的场景,父组件中有个提交按钮,点击提交的时候会需要获取到子组件的数据,有个方法很好用 父组件引用组件的地方 父...
  • VUE父组件、子组件的传值及获取值

    千次阅读 2018-08-02 11:05:16
    import Test1 from "./test1"; import 引入的名字必须首字母大写 from ''; 父组件向子组件传值: props: 子组件: Vue.component('blog-post'... props: ['postTitle'],//接收父组件传子组件 ...
  • 类似上一篇子组件调用父组件的...在父组件引用的子组件加上 :(随便一个名称)="(父组件里定义的参数)" 用“:”表示的是动态变化 ;“@”表示的是调用方法 在子页面获取父页面参数用这种方式表示 注意用public ...
  • ​我们在《Angular2父子组件之间数据传递:局部变量获取组件》讲到过(如果有不懂的,可以先去看看),通过在子组件模版上设置局部变量的方式获取组件的成员变量,但是有一个限制,必须在父组件的模版中设置局部...
  • Vue中使用ref获取DOM元素和组件引用

    万次阅读 2018-07-29 19:34:11
    利用ref获取DOM元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件&lt;/...
  • 原因:因为自己想了解组件中properties里面的如何获取到而记录这篇文章 一、自创自定义组件,在json文件夹写上“component”:true 二、父组件的操作步骤 2.1.在json文件夹加上使用组件 2.2 在js文件中写好要传...
  • 1.首先创建一个自定义组件 Vue.component('test-component',{ template:`<div id="el"><input @input="change"><button @click="getInputData">点我看input数据</button></div>`, ...
  • 这意味着不能并且不应该在子组件的模板内直接引用组件的数据。可以使用 props 把数据传给子组件。 想要引用组件需要:<bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{ props:{ ...
  • 小程序属于Mini架构,不属于mvvm架构,所以它的自定义组件并没有进行缓存,由于自定义组件并未缓存,所以自定义组件从父组件接收的引用类型参数被改变时,自定义组件的父组件引用类型参数不能实时更新 ...
  • vue 父组件使用ajax异步请求获取数据,由于是异步获取,所以子组件mounted阶段,ajax仍未完成请求,子组件props获取不到数据。 解决方法: 第一步:子组件中使用watch,监听传参的变化,执行方法逻辑。 第二步:...
  • 微信小程序获取form表单中picker组件的选中的 最近在使用微信小程序form表单提交数据时,尝试通过设置id等一系列方法后,还是没办法将表单中的picker所选择的一同提交。最后通过尝试在页面设置全局变量,终于...
  • 组件之间循环引用

    千次阅读 2018-11-03 16:06:00
    是为了便于区分两个组件,其实这两个组件互为 祖先和后代的关系,因为他们互相循环引用,不是简单的 父子关系 &lt;div id="div"&gt; &lt;!--用prop 获取实例data数据--&gt; &...
  • Unity获取物体组件调用

    千次阅读 2015-03-09 23:00:44
    本文只记录了调用物体的脚本,Unity界面相关操作并未介绍。 需要实现的内容如下: 1. 场景 一个光源, 一个cube1 一个cube2   一个sphere 一个Cylinder   点击cube1 可以控制 光源...using UnityEngine; using
  • 原文出处:http://blog.csdn.net/long328583644/article/details/74894446我们在《Angular2父子组件之间数据传递:局部变量获取组件》讲到过(如果有不懂的,可以先去看看),通过在子组件模版上设置局部变量的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 172,021
精华内容 68,808
关键字:

获取引用组件的值