Vue组件通信（props，refs）

最新推荐文章于 2023-07-27 18:19:58 发布

huxiaoxiao.

最新推荐文章于 2023-07-27 18:19:58 发布

阅读量701

点赞数 1

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

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121979421

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

父子组件的通信（通讯）（组件的通信是vue核心之一）组件是vue的核心，组件的通信是vue的核心的核心

通信：数据的“动态的实时的”传递

父传子

父传子:（子组件中）props属性-----父用子的时候通过属性传递

1.先创建根组件和一个局部组件，在根组件中注册局部组件，让局部组件成为根组件的子组件

<body>
    
    <div id="app">

        <one></one>
    </div>
    <template id="one">
        <div>
            <h1>我是子组件one</h1>
        </div>
    </template>

    <script src="./js/vue2.6.14.js"></script>
    <script>
        let one = {
            template:`#one`
        }


        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                one
            }
        })
    </script>
</body>

2.在根组件的数据中心有三条数据，分别是字符串，num，数组

 data:{
                mes:'我是父组件中的数据，我要传给子组件',
                num:100,
                list:[1,2,3,4,5]
            }

3.子组件中定义props的属性-----子要申明props['属性名']来接收（接收父传递给子的数据）

let one = {
            props:['getmes','number','arr'],
            template:`#one`
        }

            // 另外几种写法
            // props:['getmes'],
            // 另一种写法，告诉别人我的数据类型
            // props:{'getmes':{type:String}},
            // 又是一种写法，简化上一种
            // props:{getmes:String},
       // props:{
            //     getmes:String,
            //     number:Number,
            //     arr:Array
            // },

4.在父组件的视图层使用子组件时，进行绑定数据

<div id="app">

        <one :sendone="mes" :num="i" :list="arr"></one>
    </div>

5.在子组件的视图层使用父级传来的数据：

<template id="one">
        <div>
            <h1>我是子组件one</h1>
            <p>接收到的父组件数据----{{getmes}}</p>
            <p>接收到的数值---{{number}}</p>
            <ul>
                <li v-for="i in arr">{{i}}</li>
            </ul>
        </div>
    </template>

父实例（父组件）

ref 获取子组件实例 (在模板中，使用组件的时候，在组件上添加的ref属性)

识别：在子组件上或元素上使用属性ref

ref---为了识别父组件在获取组件实例时候，能够识别到谁是谁

ref 和 $refs 父组件和子组件（父子之间数据访问）

1.创建根组件，和两个子组件

<body>
    <div id="app">

        <one></one>
        <two></two>
    </div>
    <template id="one">
        <div>
            <h1>我是子组件one</h1>
        </div>
    </template>
    <template id="two">
        <div>
            <h1>我是子组件two</h1>
        </div>
    </template>

    <script src="./js/vue2.6.14.js"></script>
    <script>
        let one = {
            template:`#one`
        }
        let two = {
            template:`#two`
        }
        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                one,
                two
            }
        })
    </script>
</body>

2.在子组件中有数据和一个计算属性：

let one = {
            template:`#one`,
            data(){
                return {
                    mes:'我是one的数据'
                }
            }
        }
        let two = {
            template:`#two`,
            data(){
                return {
                    num:10
                }
            },
            computed:{
                setnum(){
                    this.num*100
                }
            }
        }

3.在根组件的视图层通过 ref 给子组件一个名字：

<div id="app">

        <one ref="aaa"></one>
        <two ref="bbb"></two>
    </div>

4.在根组件的生命周期函数中访问子组件的数据：

 mounted(){
                console.log(this.$refs);
                console.log(this.$refs.aaa.mes);
                console.log(this.$refs.bbb.setnum)
            }

huxiaoxiao.

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Vue组件通信（props，refs）

父子组件的通信（通讯）（组件的通信是vue核心之一）组件是vue的核心，组件的通信是vue的核心的核心通信：数据的“动态的实时的”传递父传子父传子:（子组件中）props属性-----父用子的时候通过属性传递1.先创建根组件和一个局部组件，在根组件中注册局部组件，让局部组件成为根组件的子组件<body> <div id="app"> <one></one> </div>
复制链接

扫一扫