【无标题】

万里长江雪

于 2022-03-17 18:54:29 发布

阅读量54

点赞数

分类专栏： java 后端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/fwdwqdwq/article/details/123557778

版权

java 同时被 2 个专栏收录

306 篇文章 19 订阅

订阅专栏

后端

18 篇文章 0 订阅

订阅专栏

VUE中父子组件数据的访问——父访子

$refs

步骤：

①在父组件的视图层中，给对应子组件添加ref属性，并且起一个唯一的名字

eg:

Markup

  <div id="app">
        <child1 ref="c1"></child1>
        <child2 ref="c2"></child2>
    </div>

②在父组件中直接访问

Markup

 let vm = new Vue({
        el:'#app',
        data:{
        },
        methods:{
        
        },
        mounted() {
        
            // c1是div#app中的chlid中的refs属性 
            console.log(this.$refs.c2.title);
            console.log(this.$refs.c2.getYear());
            console.log(this.$refs.c2.newTimer);
        },
        components:{
            Child1,
            Child2
        }

代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <div id="app">
        <child1 ref="c1"></child1>
        <child2 ref="c2"></child2>
    </div>

    <template id="child1">
        <div>
            <p>我是Child组件1</p>
        </div>
    </template>
     <template id="child2">
        <div>
            <p>我是Child组件2</p>
        </div>
    </template>
<script src="js/vue.js"></script>
<script>
    let Child1 = {
        data:function(){
            return{
                uname:'妞妞 丫丫 乐乐',
                timer:new Date()
            }
        },
        template:'#child1',
        computed: {
            newTimer:function(){
                return this.timer.getFullYear()
            }
        },
        methods: {
            change:function(){
                return this.uname.split(' ')
            }
        }
    }
    let Child2 = {
        data:function(){
            return{
                title:'网易云音乐',
                timer: new Date()
            }
        },
        template:'#child2',
        computed: {
            newTimer:function(){
                return this.timer.getHours()
            }
        },
        methods: {
            getYear:function(){
                return this.timer.getFullYear()+'年'
            }
         }
    }
    let vm = new Vue({
        el:'#app',
        data:{
        },
        methods:{
        
        },
        mounted() {
        
            // c1是div#app中的chlid中的refs属性 
            console.log(this.$refs.c2.title);
            console.log(this.$refs.c2.getYear());
            console.log(this.$refs.c2.newTimer);
        },
        components:{
            Child1,
            Child2
        }
    
    })
</script>
</body>
</html>

方法二$children

$children

$KaTeX parse error: Undefined control sequence: \[ at position 42: …件的子组件,子组件会被放进数组\̲[̲\]里）获取子组件的下标后,…$ parent一样

eg:

Markup

console.log(this.$children);

执行/获取第一个子组件的方法/属性值 this.$children[0].方法名/data属性名

Markup

console.log(this.$children[0]);

具体案例代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <div id="app">
        <child></child>
    </div>

    <template id="child">
        <div>
            <p>我是Child组件</p>
        </div>
    </template>
<script src="js/vue.js"></script>
<script>
    let Child = {
        data:function(){
            return{
                uname:'妞妞 丫丫 乐乐',
                timer:new Date()
            }
        },
        template:'#child',
        computed: {
            newTimer:function(){
                return this.timer.getFullYear()
            }
        },
        methods: {
            change:function(){
                return this.uname.split(' ')
            }
        }
    }
    let vm = new Vue({
        el:'#app',
        data:{
        },
        methods:{
        
        },
        mounted() {
            console.log(this.$children[0]);
            console.log(this.$children[0].change());
            console.log(this.$children[0].newTimer);
        },
        components:{
            Child
        }

})
</script>
</body>
</html>

万里长江雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

VUE中父子组件数据的访问——父访子$refs步骤：①在父组件的视图层中，给对应子组件添加ref属性，并且起一个唯一的名字eg:Markup <div id="app"> <child1 ref="c1"></child1> <child2 ref="c2"></child2> </div>②在父组件中直接访问Markup let vm = new Vue({
复制链接

扫一扫

专栏目录