【无标题】

最新推荐文章于 2024-09-30 14:28:41 发布

一个前端女子

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量124

点赞数

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

本文链接：https://blog.csdn.net/qq_44173499/article/details/123448228

版权

vue2 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

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

$children 获取"全部的"子组件（获取当前组件的子组件,子组件会被放进数组[]里）获取子组件的下标后,操作和$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>