06-vue-2-组件的ref属性

最新推荐文章于 2024-03-01 09:54:46 发布

Y__C__X

最新推荐文章于 2024-03-01 09:54:46 发布

阅读量259

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41197830/article/details/118935600

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

总结:这种形式也能进行传值 或者说是主动拿值  更为便捷 人性化
进行遍历会发现 遍历了6个 都以数组的形式展现
 而上面两个同名的demo1只在refs中存在后面那个demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<!--ref被用来给元素或子组件注册引用信息。  (说白了就是给父组件refs属性一个别名然后指向子组件)
    引用信息将会注册再父组件上的$refs对象上
    如果在普通dom元素上使用,引用指向的就是DOM元素;
    而如果是在子组件上,引用就指向组件实例-->
<body>
<div id="app">
<!--    总结:这种形式也能进行传值 或者说是主动拿值  更为便捷 人性化-->
<!--    ref 相当于组件的别名  id 类名  -->
<!--    可以在父组件里通过$refs对象进行访问指定ref值的子组件-->
<!--    如果不是通过for循环遍历的ref值,那么后面的ref会把前面的覆盖掉-->
    <ycx ref="demo1"></ycx>
    <ycx ref="demo1"></ycx><br>
<!--注意    这里进行遍历会发现 遍历了6个 都以数组的形式展现 而上面两个同名的demo1只在refs中存在后面那个demo1 -->
    <ycx ref="demo2" v-for="item in 6"></ycx>
    <button @click="getycx">获取ycx组件</button>
</div>
<script id="temp" type="text/html">
    <div>
        这是ycx组件的内容{{num}}
    </div>
</script>
<script>
    Vue.component('ycx', {
        template: '#temp',
        data() {
            return {
                num: 1
            }
        }
    })
    new Vue({
        el: '#app',
        data: {},
        methods:{
            getycx(){
                //通过当前ref获取到的组件,可以在父组件里面直接进行 操作
                console.log(this.$refs)
            }
        }
    })
</script>
</body>
</html>

Y__C__X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-vue-2-组件的ref属性

总结:这种形式也能进行传值或者说是主动拿值更为便捷人性化进行遍历会发现遍历了6个都以数组的形式展现而上面两个同名的demo1只在refs中存在后面那个demo1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js">&.
复制链接

扫一扫