精华内容
下载资源
问答
  • vue中ref和$ref

    2021-06-12 10:11:39
    div ref="testDom">---我是textDom节点的内容---</div> <button @click="getTest">获取testDom节点</button> </div> </template> <script> export default { name:

    基本用法

    1、本页面获取dom元素

    <template>
      <div id="app">
        <div ref="testDom">---我是textDom节点的内容---</div>
        <button @click="getTest">获取testDom节点</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "index",
      methods: {
        getTest() {
          console.log(this.$refs.testDom);
        },
      },
    };
    </script>
    

    在这里插入图片描述

    2.获取子组件中的data

    index.vue

    <template>
      <div id="app">
        <son ref="sonContent"></son>
        <button @click="getSon">获取son组件中的值</button>
      </div>
    </template>
    
    <script>
    import son from '../components/son';
    export default {
      name: "index",
      components:{
          son
      },
      methods: {
        getSon() {
          console.log(this.$refs.sonContent.msg);
        },
      },
    };
    </script>
    

    son.vue

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

    在这里插入图片描述

    三、调用子组件中的方法

    index.vue

    <template>
      <div id="app">
        <son ref="getSonFun"></son>
        <button @click="getSon">获取son组件中的方法</button>
      </div>
    </template>
    
    <script>
    import son from '../components/son';
    export default {
      name: "index",
      components:{
          son
      },
      methods: {
        getSon() {
          this.$refs.getSonFun.getFun()
        },
      },
    };
    </script>
    

    son.vue

    <template>
      <div>
    
      </div>
    </template>
    
    <script>
    
    export default {
      name:'son',
      data() {
        return {}
      },
      methods:{
        getFun(){
          console.log('我是子组件中的方法呀!');
        }
      }
    }
    </script>
    

    在这里插入图片描述

    展开全文
  • Vue ref

    2021-05-16 03:16:21
    目录 本页面获取dom元素 父组件获取子组件中的data ...div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> .

    目录

     

    本页面获取dom元素

    父组件获取子组件中的data

    父组件调用子组件中的方法

    子组件调用父组件中的方法


    本页面获取dom元素

    <template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        getTest() {
          console.log(this.$refs.testDom)
        }
      }
    };
    </script>

    父组件获取子组件中的data

    子组件

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

    父组件

    <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>

    父组件调用子组件中的方法

    子组件

    <template>
      <div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用到了")
        }
      }
    }
    </script>

    父组件

    <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() {
          this.$refs.hello.open();
        }
      }
    };
    </script>

    子组件调用父组件中的方法

    子组件

    <template>
      <div>
    </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用了");
          //  调用父组件方法
          this.$emit("refreshData");
        }
      }
    }
    </script>

    父组件

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

     

     

    展开全文
  • fix(ref): fix ref usage

    2020-11-23 03:57:40
    div ref="div"> <div element.ref="div"> <custom-element view-model.ref="ceVm"> <div custom-attr.bind="..." custom-attr.ref="...
  • react 使用ref

    2018-07-19 14:15:50
    div ref="content"&gt;&lt;/div&gt; this.refs.content react中ref这样的用法已经是很落后的了(在react中不要轻易的使用ref除了一些表单、动画、多媒体一些特殊需求外,要有一个明确的态度...

    <div ref="content"></div>

    this.refs.content

    react中ref这样的用法已经是很落后的了(在react中不要轻易的使用ref除了一些表单、动画、多媒体一些特殊需求外,要有一个明确的态度能不用ref的就不要用)

    用新方法

    可以定义一个全局变量 

    var content ;

    <div ref={(e)=>{content  = e}}></div>

    这个时候content就代表div本身了

    展开全文
  • ref的使用

    2021-03-01 11:37:41
    div ref="test" @click="test">ref 测试</div> mounted(){ console.log(this.$refs.test); }, 当ref所在的dom元素是一个组建时 子组建 <template> <div>组建</div> </...

    vue 提供的一个操作dom的属性ref,用起来和ID类似,通过this.$ref来调用

    1. 常见的用法
    <div ref="test" @click="test">ref 测试</div>
    
    mounted(){
            console.log(this.$refs.test);
        },
    

    在这里插入图片描述

    1. 当ref所在的dom元素是一个组建时
      子组建
    <template>
      <div>组建</div>
    </template>
    
    <script>
    export default {
      name:'refTest',
      data() {
        return{
          data:1
        }
      },
      methods: {
        _alert() {
          alert('test-ref')
        }
      }
    }
    </script>
    
    

    引用子组建

    <template>
      <div>
          <refTest ref="Test"></refTest>
      </div>
    </template>
    
    <script>
    import refTest from '@/components/ref.vue'
    export default {
        name:"test",
        components:{
            refTest
        },
        mounted(){
            console.log(this.$refs.Test);   //获取到的是一个vue组建对象,里面有各种属性,其中有一个属性是$el,这就是dom对象,和我们直接绑定在dom上获取的一样
            console.log(this.$refs.Test.$el);  //获取到dom对象
        },
    }
    </script>
    
    <style>
    
    </style>
    

    获取到的是一个vue组建对象,里面有各种属性,其中有一个属性是$el,这就是dom对象,和我们直接绑定在dom上获取的一样
    在这里插入图片描述
    获取到dom对象
    在这里插入图片描述

    展开全文
  • $ref使用

    2021-03-29 22:19:30
    $ref用来获取组件实例,不通过父子通信,可以获取组件的所有方法及data的变量 $ref需要在dom挂载后才能获取到,否则undefined 获取原生dom节点 ...div ref="mydiv">111111111111111111111111</div> ..
  • react ref 使用

    2021-02-23 20:42:23
    import React from 'react' import Child from './child' export default class UseRef extends React.Component { /** * 第一种ref使用方式 */ // componentDidMount() { ...div ref="div">1
  • vue 3.0 使用ref获取dom元素

    万次阅读 热门讨论 2020-09-24 16:00:52
    div ref="myRef"></div> this.$refs.myRef Vue 3.0获取DOM <template> <div :ref="setRef">获取DOM元素</div> </template> <script> import { nextTick } from 'vue'; ...
  • Maintain children ref

    2020-11-29 14:10:33
    div ref="{ref}" style="{referenceStyle}"> Reference element </div> )} </reference> </code></pre> <p>with <pre><code>javascript <reference> {({ ref }) &...
  • react的ref

    2020-06-01 12:18:41
    在类组件里面与函数组件里面 在类组件里面使用 <Form ref="form" /> this.refs.form 函数组件 import React, { useRef, ...div ref={form}></div> useEffect(x=>{ console.log(form) }) ...
  • Rename `ref` to `domRef`

    2020-12-01 01:06:19
    div ref="{" this.usedomelement style="{" display: flexdirection:></div> </code></pre> <p>Unfortunately, <code>ref</code> is a magic prop that the <code>Row</code> ...
  • <template> <div class="drag"> <div ref="element" class="content" v-drag draggable="false"> <p>文字网页</p> </div> <div style="hei...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,510
精华内容 24,204
关键字:

divref