Vue 组件通信 - Ref组件通信

最新推荐文章于 2025-05-29 11:43:12 发布

JSON_L

最新推荐文章于 2025-05-29 11:43:12 发布

阅读量1k

点赞数 23

CC 4.0 BY-SA版权

分类专栏：前端 # Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/146804906

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

Vue

43 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件通信 - Ref组件通信

Ref组件通信

Ref绑定dom节点，拿到的就是dom对象

Ref绑定组件，拿到的就是组件对象

Ref是固定的，作用是引用。

创建表单

创建一个表单，获取组件实例，不通过父子通信，直接拿状态和赋值状态。

Ref是固定的，作用是引用。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" ref="mytext">
    <input type="password" ref="mypassword">
    <div ref="mydiv">1111111</div>
    <button @click="handleAdd">Add</button>
    <child></child>
</div>
<script>
    let vm = new Vue({
        el: "#box",
        methods: {
            handleAdd() {
                console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mydiv)
            }
        }
    })
</script>
</body>
</html>

绑定组件

因为还没有定义组件，所以控制台会抛出异常。

下面开始设置全局组件，并在绑定事件中打印组件对象。

示例如下：

<div id="box">
    <input type="text" ref="mytext">
    <input type="password" ref="mypassword">
    <div ref="mydiv">1111111</div>
    <button @click="handleAdd">Add</button>
    <child ref="mychild"></child>
</div>
<script>
    Vue.component("child", {
        template:`
        <div>
        child
        </div>`
    })
    let vm = new Vue({
        el: "#box",
        methods: {
            handleAdd() {
                console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mychild)
            }
        }
    })
</script>

效果：

定义组件中的状态

在组件内部定义状态，并渲染出来。

示例如下：

Vue.component("child", {
    data() {
      return {
          myname: "child-222222"
      }
    },
    template:`
    <div>
    child--{{myname}}
    </div>`
})

修改组件中的状态

首先拿到组件中定义的状态，然后修改组件中的状态。

示例如下：

let vm = new Vue({
    el: "#box",
    methods: {
        handleAdd() {
            //console.log(this.$refs.mytext, this.$refs.mypassword, this.$refs.mychild)
            console.log(this.$refs.mychild.myname)
            this.$refs.mychild.myname="parent-111111"
        }
    }
})

效果：

说明

这样的修改方式虽然简单，但是容易造成混乱和出现问题且不易排查和扩展；

容易造成数据流紊乱。

组件注意

属性：父组件传给你的属性，只有父组件可以重新传，但不允许子组件随意修改。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    {{title}}
    <child :mytitle="title"></child>
</div>
<script>
    Vue.component("child", {
        props:["mytitle"],
        template:`
        <div>
        child-{{mytitle}}
        <button @click="handleClickc">click</button>
        </div>`,

        methods: {
            handleClickc() {
                this.mytitle="2222222222"
            }
        }
    })
    let vm = new Vue({
        el:"#box",
        data:{
            title:"1111111111111"
        }
    })
</script>
</body>
</html>

效果：

页面警告不要直接去修改组件传递过来的属性；因为修改了，下次再传属性还是会被覆盖。

会造成子属性和父属性不统一，数据流紊乱，会出现不可预期的错误。

属性 --父组件传给你的属性,只有父组件可以重新传,但不允许子组件随意修改.

状态 -- 组件内部的状态,可以随意修改

解决方式

v-once 只修改一次，然后缓存状态。

示例如下：

Vue.component("child", {
    props:["mytitle"],
    template:`
    <div v-once>
    child-{{mytitle}}
    <button @click="handleClickc">click</button>
    </div>`,

    methods: {
        handleClickc() {
            this.mytitle="2222222222"
        }
    }
})