精华内容
下载资源
问答
  • 主要为大家详细介绍了Vue组件如何获取子组件中的变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue ref 获取子组件属性

    千次阅读 2019-09-02 11:26:43
    父引入、注册组件并调用组件 引入、注册 <script> .... import CustomerModal from './modules/CustomerModal' export default { name: "CustomerList", mixins:[JeecgListMixin], components: { JDate...

    父引入、注册组件并调用组件

    引入、注册

    <script>
      ....
      import CustomerModal from './modules/CustomerModal'
      export default {
        name: "CustomerList",
        mixins:[JeecgListMixin],
        components: {
          JDate,
          CustomerModal,
          JDictSelectTag
        },
        ...
      }
    </script>
    

    调用组件

    <customer-modal ref="modalForm" @ok="modalFormOk"></customer-modal>
    // ref属性值指定了从$refs中获取组件的名称
    

    调用子组件的函数

    this.$refs.modalForm.add();
    

    调用子组件的属性

    this.$refs.modalForm.title = "新增";
    
    展开全文
  • 通过dom更新完成后的异步回调来实现精确获取子组件属性: this.$nextTick(()=>{ }) //等dom更新完成后执行内部的回调函数 下面是实验代码: <!DOCTYPE html> <html lang="en"> <head> <...

    零基础学习Vue: 第25课 获取属性Vue属性对象获取方法:

    通过dom更新完成后的异步回调来实现精确获取子组件属性:
    this.$nextTick(()=>{ }) //等dom更新完成后执行内部的回调函数

    下面是实验代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ref获取节点</title>
        <!-- 引入vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
      <!-- 引入子组件 并且设置标签节点获取名isson -->
      <son ref="isson">我是组件</son>
    </div>
    
    <!-- 设置子组件son标签 -->
    <template id="son">
        <div>{{msg}}</div>
    </template>
    
    <script>
        //定义子组件son
        let son = {
          template:'#son',
          data(){
            return {
              msg:'我是子组件的数据'
            }
          },
          mounted(){
            this.msg = 'xxx';
            console.log('这是子组件内输出的msg改变后的值'+this.msg);  //确定
          }
        }
    
        let vm = new Vue({
            el:'#app',
            components:{	//在根组件内注册子组件son
                son
            },
            mounted(){  //mounted生命周期函数(数据以挂在到页面上时触发)
              console.log('第一种方法'+this.$refs.isson.$el.innerText) //第一种方法获取子主件的内容
             
              this.$nextTick(()=>{      //第二种方法获取子主件的内容
                console.log('第二种方法'+this.$refs.isson.$el.innerText) 
              })
            }
        })
    </script>
    
    </body>
    </html>
    

    运行结果如下:

    在这里插入图片描述

    回顾以下vue内对象属性的获取

    • vm.$set(对象,属性,初始值) //设置vm中某对象 内的属性 给设置值
    • this.$mount //获取Vue对象
    • this.$nextTick(回调函数) //等dom更新完成后执行回调
    • vm.$destroy() //销毁某Vue对象
    • vm.$data //外部获取Vue内的data的属性
    • this.$el //获取根节点
    展开全文
  • vue3 父组件获取子组件属性

    千次阅读 2021-05-17 15:55:49
    子组件按照普通组件来写,把要让父组件获取的数据return 出去 在父组件中一定要把获取子组件 return出去,否则是拿不到的 <template> <Son ref='sonRef'/> </template> <script lang="ts"&...

    子组件按照普通组件来写,把要让父组件获取的数据return 出去

    在父组件中一定要把获取的子组件 return出去,否则是拿不到的

    <template>
     <Son ref='sonRef'/>
    </template>
    <script lang="ts">
    import {
      defineComponent,  
      ref,
    } from 'vue';
    export default defineComponent({
      name: 'Login',
      components: { Son },
      setup(props) {
    	const sonRef= ref(null);
    	const getSon = () => {
    		console.log(sonRef.value.xxx);
    	}
    	// 注意!一定要把子组件sonRef  return 出去
    	return {
    	sonRef,
    	}
    	}
      })
    </script>
    

    当出现这个警告时,表示这个对象可能为空,则可以使用 !.
    如上面的 sonRef.value.xxx 改为 sonRef.value!.xxx
    在这里插入图片描述
    若出现这个报错信息 ,则把数据断言成any
    (sonRef.value as any)!.xxx 或者 (sonRef.value as any).xxx 兴许也行。
    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇在Vue获取组件声明时的name属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的本质就是每一块只负责自己这一块的工作,这样更...首先我们很容易想到就是绑定一个点击事件,并且携带一个参数,并且获取子组件属性,这样在这个父组件中我并没有控制子组件的开关,只是我获取子组件的方法

    vue的本质就是每一块只负责自己这一块的工作,这样更容易维护。
    这里主要使用了vue的$ref:

    1. 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作。
    2. 当使用在子组件上,可以用来获取子组件的属性。

    那么下面我们要实现的就是如何在父组件上使用子组件的方法
    目标:我需要实现一个在父组件上控制子组件的弹窗显示,并且通过参数判断显示哪一个内容。

    1. 首先我们很容易想到就是绑定一个点击事件,并且携带一个参数,并且获取子组件的属性,这样在这个父组件中我并没有控制子组件的开关,只是我获取了子组件的方法或者属性,让子组件自己控制开关。
    //这里是子组件
    <popup  ref="popup"></popup>
    //绑定点击事件,并且携带参数
    <div class="item-box" @click="showPop('teacher')">
    //定义点击事件
    showPop(event) {
    //获取子组件的属性/方法,这里是获取popup子组件的show方法,并且携带参数
    	this.$refs.popup.show(event);
    },
    
    1. 在子组件中就需要定义方法,控制显示弹窗内容,并且将传递过来的参数保存
    //控制弹窗的显示隐藏
    <div v-show="showPopup">
         <!-- 关闭按钮,点击直接将showPopup定义为false-->
          <div class="closePopup" @click="showPopup = false"></div>
          <!-- 老师数量 -->
          //通过判断type值控制显示哪个弹窗内容
          <teacher v-if="type =='teacher'"></teacher>
          <student v-else-if="type =='student'"></student>
          <turnover v-else></turnover>
    </div>
    
    //在data中定义默认值
    data(){
         return {
              showPopup: false,
              type: ''
          }
      },
    //最后在methods中定义show方法,控制弹窗的显示
    methods:{
       show(type){
            this.type = type
            this.showPopup = true;
        }
    }
    

    这样就完成了,每个组件只负责我自己需要做的事情,不会影响到其他组件,这样更易于维护。

    展开全文
  • 组件子组件进行传值 父组件: <template> <div> <h2>我是父组件:</h2> <div> <input v-model="parementMsg"/> </div> <div> <!-...
  • 下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue.js 子组件无法获取组件store值的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • props属性组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 想要引用父组件需要:<bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的...
  • 主要介绍了vue如何获取自定义元素属性参数值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue获取子组件数据的三个方法

    千次阅读 2020-10-10 18:32:07
    vue获取子组件数据的三个方法 1.this.$emit ,传父 2.this.$children属性 this.$children返回的是数组 例子: //获取子组件数据 console.log(this.$children[0].cdata); //调用子组件方法 this.$...
  • vue子组件主动获取组件属性方法

    万次阅读 2018-05-22 11:07:53
    <h1>this is index <my-header></my-header... 获取组件属性方法 export default{ data(){ return { } }, methods:{ getAttr(){ console.log(this.$parent.msg); this.$parent.fun(); } } }
  • 为什么80%的码农都做不了架构师?...子组件获取组件属性 子组件组件 子组件获取组件的方法 子组件 转载于:https://my.oschina.net/ndweb/blog/1793333
  • 但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才渲染,...
  • VUE 事件获取当前组件属性

    万次阅读 2018-12-04 13:26:20
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 for循环把当前的item传递给绑定事件: <block v-for="(item, index) in data_list">...div v-on:click='changeType(item)' class="ci ...
  • vue 子组件获取组件的方法 this.$emit("searchhide"); vue 子组件获取组件的数据 父组件 <child :trust-plan-id-list="data"></child> 在子组件中声明并使用变量 在props 中声明,然后就可以...
  • vue组件主动获取子组件方法属性

    千次阅读 2018-05-22 11:03:58
    &lt;template&gt; &lt;div id="index"&gt; &lt;h1&gt;this is index&lt;/h1&gt; &lt;my-header ref='header'&gt;&lt;/my-header&...触发子组件
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • 子组件id 父组件中 document.getElementById(“comment”);直接获取子组件id属性
  • Vue组件获取子组件中的变量

    万次阅读 2019-03-21 09:35:04
    vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题。 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们...
  • VUE3获取子组件的方法,变量

    千次阅读 2021-04-25 09:30:00
    VUE3获取子组件内方法和变量 1,ref获取组件 <child ref="child" /> ---------------------- //省略代码 const child=ref(null) console.log(child.value) //{} 很明显,vue3现在不能使用以前的ref来或者...
  • Vue 子组件调用父组件属性,方法

    千次阅读 2019-11-07 13:52:42
    一、子组件调用父组件的方法 子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了 //父组件 <template> <div> <label>我是父组件</label> <child @fatherMethod=...
  • Vue获取组件name属性

    万次阅读 2018-09-21 09:31:22
    Vue获取组件name属性 Vue在编写组件时一般都会显式的指明其name属性 更多精彩 更多技术博客,请移步 asing1elife’s blog 获取name属性 this.$options.name
  • 今天小编就为大家分享一篇vue中子组件的methods中获取到props中的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
  • 子组件定义一个ref属性。eg:ref="childItem"  2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}  2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,668
精华内容 24,667
关键字:

vue获取子组件的属性

vue 订阅