Vue 组件 ref属性

最新推荐文章于 2024-06-11 17:08:03 发布
最新推荐文章于 2024-06-11 17:08:03 发布
阅读量1k 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71967396/article/details/127603878
版权

Vue 组件 ref属性

文章目录

1、计算属性

如果{{函数()}}每次页面刷新，函数都会重新执行
函数–>当属性来使用，缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    <input type="text" v-model="name"> -&#45;&#45;》》 {{// name.slice(0, 1).toUpperCase() + name.slice(1)}}-->
    <input type="text" v-model="name"> ---》》 {{handleUpper()}}

    <hr>
    <input type="text" v-model="name2">--->{{upper}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name2: ''
        },
        methods: {
            handleUpper() {
                // 只要页面刷新就会变化
                console.log('我执行了')
                return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
            }
        },
        computed: {
            upper() {
                // 只有涉及到计算属性中使用的变量发生变化，它才重新运算
                console.log('计算属性我执行了')
                return this.name2.slice(0, 1).toUpperCase() + this.name2.slice(1)
            }
        }
    })
</script>
</html>

2、计算属性重写过滤案例

以返回值方式呈现 不会改变原变量值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],

        },
        computed: {
            newdataList() {
                // 计算属性一定要return，因为计算属性的值就是咱们return的值
                return this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }


    })


</script>
</html>

2、监听属性

监听一个属性的变化，只要它发生变化，就执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <span> <button @click="type='人文'">人文</button>|<button @click="type='社科'">社科</button>|<button
            @click="type='地理'">地理</button></span>
    <br>
    {{type}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: '人文',
        },
        watch: {
            type(val) {
                console.log('修改后变成了，', val)
                console.log('向后端加载数据了')
            }
        }
    })
</script>
</html>

3、组件介绍和定义

扩展 HTML 元素，封装可重用的代码，目的是复用
例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

定义组件（）
全局组件：全局可以使用，可以用在任意其他组件中年
局部组件：局部组件只能在定义的位置（组件中）使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>全局组件</h1>
    <child></child>
    <hr>
    局部组件
    <lqz></lqz>
    <hr>

</div>
</body>
<script>
    // 1 定义全局组件 (必须在一个标签)，组件有自己的数据，方法，生周期.....
    var obj = {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '标题'
            }
        },
        methods: {
            handleClick() {
                alert('前进')
            }
        },
    }
    Vue.component('child', obj)


    //2 局部组件


    var lqz = {
        template: `
          <div>
          <h1>我是lqz组件</h1>
          {{ name }}
          <child3></child3>
          <child></child>
          </div>`,
        data() {
            return {
                name: 'lqz'
            }
        },
        components: {
            'child3': {
                template: `
            <div>
              <h2>我是lqz组件内的组件</h2>
              </div>`,
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz
        }


    })


</script>
</html>

4、父子通信

组件和组件之间的数据，方法 都是隔离的，组件和组件之间要通信

// 通过 组件中 自定义 事件
<add @event="handleEvent"></add>

4.1、父传子

通过 在props:[]接收 组件中 自定义事件属性 传入的 数据

// 通过 组件中 自定义 事件
<div>
<add @event="handleEvent"></add>
</div>

// 组件中 接收 该变量名

props:['myname'],

4.2、父子通信 之子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="d1">
    <div></div>

    <add @event="handleEvent"></add>
    <div>
        <h2>父组件</h2>
        {{name}}
    </div>

</div>
</body>
<script>
    var add = {
        template: `<div>
        <button>这是局部组件</button>
        <input v-model="name" type="text"><button @click="handleSend">传数据至 父组件</button>
        {{name}}
        </div>`,
        data(){
            return{name:'pyy'}
        },
        methods: {
          handleSend() {
              alert('将子组件 数据传如全局')
              this.$emit('event',this.name)
          }
        },
        props:['myname'],


    }
    var vue = new Vue({
        el: '#d1',
        data: {
            name:'刘亦菲'
        },
        methods:{
          handleEvent(name){
              this.name=name
          }
        },
        components: {
            add
        }

    })
</script>
</html>

5、ref属性

ref 属性，vue定义的
可以放在普通标签上，通过this， r e f s . 自定义的名字取到的是，原生的 d o m 对象 − − 使用原生 d o m 操作了（不推荐）可以放在组件上：通过 ‘ t h i s . refs.自定义的名字取到的是，原生的dom对象--使用原生dom操作了（不推荐） 可以放在组件上：通过`this. refs.自定义的名字取到的是，原生的dom对象−−使用原生dom操作了（不推荐）可以放在组件上：通过‘this.refs.`自定义的名字取到的是 vc对象（组件对象）
可以之间使用组件对象上的方法和属性—》子组件的数据给父组件
父组件有个方法执行，需要传参数，传入子组件的数据—>子的数据给了付清
拿到子对象之间使用父中的数据修改—》父传子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>ref属性放在普通标签上</h1>
    <input type="text" ref="myinput" v-model="name">====>{{name}}
    <br>
    <button @click="handlePrint">点我，打印点东西</button>
    <hr>
    <h1>ref属性放在组件上</h1>
    <lqz ref="mylqz"></lqz>


</div>
</body>
<script>


    var lqz = {
        template: `
          <div>
          <button>后退</button>
          首页--{{ age }}---{{ show }}
          <button @click="handleQJ('迪丽热巴')">前进</button>
          </div>`,
        data() {
            return {
                show: true,
                age: 19
            }
        },
        methods: {
            handleQJ(name) {
                alert(name)
            }
        }


    }
    var vm = new Vue({
        el: '#app',
        data: {
            name: '刘亦菲'
        },
        methods: {
            handlePrint() {
                //this.$refs.myinput 原生dom对象
                // this.$refs.myinput.value='xxxxxx'
                console.log(this.$refs)
                // this.$refs.mylqz.age=999
                // this.$refs.mylqz.show = false
                // this.$refs.mylqz.handleQJ()
                // this.name=this.$refs.mylqz.age
                this.$refs.mylqz.handleQJ(this.name)


            }
        },
        components: {
            lqz
        }


    })


</script>
</html>

6、动态组件

点击不同的标签 显示不同组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <div>
        <span @click="type='home'">首页</span>|
        <span @click="type='goods'">商品</span>|
        <span @click="type='order'">订单</span>
    </div>
    <div>
        <component :is="type"></component>
    </div>


</div>
</body>
<script>

    // 1 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
            <h1>首页</h1>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
            <h1>商品</h1>
        </div>`,
    })
    Vue.component('order', {
        template: `
        <div>
            <h1>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },


    })


</script>
</html>

7、keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <div>
        <span @click="type='home'">首页</span>|
        <span @click="type='goods'">商品</span>|
        <span @click="type='order'">订单</span>
    </div>
    <div>
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
    </div>


</div>
</body>
<script>

    // 1 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
            <h1>首页</h1>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
            <h1>商品</h1>
            <input type="text" placeholder="请输入要搜索的商品"> <button>搜索</button>
        </div>`,
    })
    Vue.component('order', {
        template: `
        <div>
            <h1>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },


    })


</script>
</html>

8、插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>插槽的使用</h1>
    <home>
        <img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" width="200px" height="200px">
    </home>
    <hr>
    <home>
        <div>我是div</div>
    </home>
    <hr>

    <goods>
        <div slot="bottom">
            我是底部
        </div>
        <a href="" slot="top">点我看美女</a>

    </goods>

</div>
</body>
<script>

    // 1 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
        <button>后退</button>
           <span>首页</span>
         <button>前进</button>
         <hr>
         <slot></slot>
        </div>`,
    })

    Vue.component('goods', {
        template: `
        <div>
        <slot name="top"></slot>
        <hr>
        <button>后退</button>
           <span>首页</span>
         <button>前进</button>
         <hr>
         <slot name="bottom"></slot>
        </div>`,
    })

    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },


    })


</script>
</html>

9、vue-cli

vue 的脚手架：快速帮我们创建除vue的项目

vue2 和vue3
vue-cli可以创建vue2和vue的项目 webpack构建工具
vite：新一代工具构建工具
vue3上，推荐使用ts写js

**先安装nodejs **
-官网：https://nodejs.org/zh-cn/download/ ，下载
安装完会释放两个命令(在环境变量中，任意路径都能敲这俩命令)

安装vue-cli，通过脚手架创建vue项目
cnpm install -g @vue/cli
只要装成功，又会多除一个可执行文件 vue

npm 下载时候，去国外，速度慢，使用国内镜像
淘宝做了一个cnpm可执行文件，用来替换npm，以后所有使用npm的地方都换成cnpm即可
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

创建vue项目
vue create myfirstvue

运行vue项
方式一：在命令行中敲：npm run serve

Tao.686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue通过ref父子组件拿值方法
10-18
在Vue组件模板中，我们可以给任何元素或组件添加一个`ref`属性，它的值是一个字符串，这个字符串将会作为该元素或组件在Vue实例的`$refs`对象中的键。例如： ```html <v-tpl2 ref="shit"> ``` 在这个例子中，`v...
Vue Ref属性配置学习
06-09
在模板中，你可以使用`ref`特性来绑定一个DOM元素或Vue组件： ```html <input ref="inputElement" /> ``` 这样，你就可以在Vue实例中通过`this.$refs.inputElement`访问这个输入框元素。 ### 在setup()中使用Ref ...
VueJS 之动态组件
两个月亮
02-03 4963
在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。
Vue 动态组件component
Tianxiaoxixi的博客
06-13 5475
Vue 动态组件component
vue组件介绍之ref
最新发布
qq_43628158的博客
06-11 318
vue组件之ref，父组件通过$refs获取子组件暴露出来的属性或方法
[Vue]ref属性
emmmm.....
10-13 5104
1. ref 属性 1.1 ref 属性的使用方式 1.1.1 标识元素或子组件 1.1.2 获取标识的元素或子组件 1.2 使用 ref 属性标记 html 标签元素 1.3 使用 ref 属性标记子组件 1.4 使用 id 获取元素或子组件
【Vue】动态组件 & 插槽 & 自定义指令
黑马程序员官方博客
01-09 295
1. 什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。2. 自定义指令的分类vue 中的自定义指令分为两类，分别是：⚫ 私有自定义指令⚫ 全局自定义指令3. 私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：4. 使用自定义指令在使用自定义指令时，需要加上 v- 前缀。示例代码如下：5. 为自定义指令动态绑定参数值。
vue 动态组件 & 异步组件
blackhehaha的博客
11-18 789
动态组件 & 异步组件 vue提供的更方便的方式去完成组件之间的切换----动态组件 1、component组件它是vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件 2、keep-alive 组件当在这些组件之间切换的时候，如果要保持这些组件的状态，以避免反复重渲染导致的性能问题，vue内置组件keep-alive帮我们解决了这个问题。使用 keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态 异步组件使用按需加载,加载之后会缓存到本地 <kee
vue 使用ref 让父组件调用子组件的方法
08-28
在 Vue.js 中，Ref 是一个特殊的属性，可以用来访问组件实例或 DOM 元素。当我们使用 Ref 时，Vue.js 会将该元素或组件实例赋值给该 Ref，从而允许我们访问和操作该元素或组件实例。 使用 Ref 让父组件调用子组件的...
详解Vue的ref特性的使用
12-28
一、ref的基本使用 ref的使用 <!-- `vm.$refs.p`将会是DOM结点 --> <p ref=p>hello <!-- `vm.$refs.child`将...某组件的$refs含有该组件的所有ref，看下面的例子 <p ref=p>hello <child-component ref
Vue 2中ref属性的使用方法及注意事项
08-30
- 当在组件上使用`ref`时，Vue会在组件实例的`$refs`对象中创建对应的属性。例如，`<child-component ref="childRef"></child-component>`会创建`$refs.childRef`，指向子组件的实例。 2. **动态`ref`**： - 动态...
Vuejs 动态组件
weixin_30952103的博客
10-18 131
http://www.cnblogs.com/-ding/p/6339740.html ①简单来说： 就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 ②动态切换： 在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示； 改变挂载的组件，只需要修改is指令的值即可。...
vue3组件ref属性用法，动态绑定ref
hongkid的专栏
05-14 648
其实ref属性可以是个函数，(el)=>{},这样想怎样存储ref就可以怎样存储。注：el是就是vue实例，赋值后访问的时候无需xx.value。如果我们需要在代码里面动态绑定ref，如果处理？
vue3之自定义ref
qq_45272615的博客
12-10 818
vue3 自定义ref
vue中ref的使用
qq_52372296的博客
04-01 7万+
ref是vue中DOM元素和组件标签中的属性
【React】组件实例的三大属性——ref
wusq的博客
03-01 390
1.字符串形式的ref class Demo extends React.Component { // 自定义函数要用箭头函数,才能拿到正确的this showDlg = () => { const input = this.refs.input1 alert(input.value) } showDlg2 = () => { const input = this.refs.input2 alert(input.value) } rend
vue动态加载组件
qq_38211205的博客
04-22 1万+
vue动态组件介绍
Vue与ref属性与refs
热门推荐
前端技术的学习整理
05-25 17万+
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册实例：这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来...
Vue的ref属性详解
qq_54954970的博客
11-19 574
Vue的ref属性： 被用来给元素或组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 使用方式： 打标识：<h1 ref='xxx'>....</h1>或<School ref='xxx'>...</School> 获取：this.$refs.xxx （1）给html标签打ref属性： 结果如下： 为真实DOM元素 （2）给组件打ref属性： 结果如下： 为组件实例对象（vc） （3
vue 父组件通过ref获取子组件的属性
08-19
在 Vue 中，可以通过 ref 属性来获取子组件的引用，并进一步访问子组件的属性。下面是一个示例： ```vue <ChildComponent ref="childRef"> 获取子组件属性 import ChildComponent from './ChildComponent...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值