文章/答案/技术大牛

发布

社区首页 >专栏 >7.vue组件(二)--双向绑定,父子组件访问

7.vue组件(二)--双向绑定,父子组件访问

用户7798898

发布于 2021-03-04 06:47:23

1.1K00

代码可运行

文章被收录于专栏：盛开在夏天的太阳盛开在夏天的太阳

运行总次数：0

代码可运行

本文主要说两件事

1. 如何实现父子组件之间的双向绑定

2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等

一. 如何实现父子组件之间的双向绑定

案例描述:

父子组件双向绑定
父组件有一个message,
子组件有一个文本框
让他们两个同步变化

实现思路:

1. 子组件接收父组件传递过来的参数
2. 先实现子组件的双向绑定
3. 子组件将数据传给父组件

实现步骤:

第一步: 子组件接收父组件的data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        父组件的值: {{message}}
        <br>
        <input type="text" v-model="message"></input>
        <comp1 :cmessage="message" ></comp1>
    </div>

    <template id="comp1">
        <div style=" width: 600px; background-color: #085e7d; color: antiquewhite">
            <h2>子组件cmessage的值:{{cmessage}}</h2>
            <br>
        </div>
    </template>
    <script>
        Vue.component("comp1", {
            template: "#comp1",
            props: ["cmessage"],

        })
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        });
    </script>
</body>
</html>

子组件通过属性props: ["cmessage"], 来接收父组件的message属性. 并且父组件修改message的值, 子组件跟随改变

效果如下:

第二步: 实现子组件属性的双向绑定

组件的数据绑定, 使用的也是data属性.但在组件中, data定义为一个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        父组件的值: {{message}}
        <br>
        <input type="text" v-model="message"></input>
        <comp1 :cmessage="message" ></comp1>
    </div>

    <template id="comp1">
        <div style=" width: 600px; background-color: #085e7d; color: antiquewhite">
            <h2>子组件cmessage的值:{{cmessage}}</h2>
            <h2>子组件cmess的值: {{cmess}}</h2>
            <br>
            cmess:<input type="text"  v-model="cmess" ></input>
            <br>
        </div>
    </template>
    <script>
        Vue.component("comp1", {
            template: "#comp1",
            props: ["cmessage"],
            data() {
                return {
                    "cmess": this.cmessage
                }
            }

        })
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            }
        });
    </script>
</body>
</html>

data中定义了属性cmess, 其值是属性cmessage的值. 我们实现cmess属性的双向绑定.cmess:<input type="text" v-model="cmess" ></input>

效果如下:

这样子组件cmess的双向绑定实现了, 但是我们发现修改父组件的时候,子组件没有变化. 修改子组件的时候, 父组件也没有变化

第三步: 子组件属性变化同步给父组件

子组件属性的改变同步给父组件, 使用的是自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        父组件的值: {{message}}
        <br>
        <input type="text" v-model="message"></input>
        <comp1 :cmessage="message" @csyncchange="syncchange"></comp1>
    </div>

    <template id="comp1">
        <div style=" width: 600px; background-color: #085e7d; color: antiquewhite">
            <h2>子组件cmessage的值:{{cmessage}}</h2>
            <h2>子组件cmess的值: {{cmess}}</h2>
            <br>
            cmess:<input type="text"  v-model="cmess"  @input="changeMessage"></input>
            <br>
        </div>
    </template>
    <script>
        Vue.component("comp1", {
            template: "#comp1",
            props: ["cmessage"],
            data() {
                return {
                    "cmess": this.cmessage
                }
            },
            methods: {
                changeMessage(event) {
                    console.log(event.target.value)
                    this.$emit("csyncchange", event.target.value)
                }
            },
            watch: {
                cmessage(val, oldval) {
                    console.log(val, oldval)
                    console.log()
                    this.cmess = val
                }
            }

        })
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
            methods: {
                syncchange(value) {
                    this.message = value
                }
            }
        });
    </script>
</body>
</html>

添加子组件的input事件: @input="changeMessage".

changeMessage(event) {
    console.log(event.target.value)
    this.$emit("csyncchange", event.target.value)
}

然后自定义一个csyncchange事件, 父组件监听这个事件的变化

<comp1 :cmessage="message" @csyncchange="syncchange"></comp1>

父组件自定义一个method方法, 接收事件传递的数据

methods: {
    syncchange(value) {
        this.message = value
    }
}

这样就实现了子组件修改cmess的值, 同步给父组件. 效果如下:

但是, 我们发现,在组建同步给父组件没问题, 组件只同步数据给了props属性, 而没有同步给cmess

第四步: 使用watch方法监听props属性的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        父组件的值: {{message}}
        <br>
        <input type="text" v-model="message"></input>
        <comp1 :cmessage="message" @csyncchange="syncchange"></comp1>
    </div>

    <template id="comp1">
        <div style=" width: 600px; background-color: #085e7d; color: antiquewhite">
            <h2>子组件cmessage的值:{{cmessage}}</h2>
            <h2>子组件cmess的值: {{cmess}}</h2>
            <br>
            cmess:<input type="text"  v-model="cmess"  @input="changeMessage"></input>
            <br>
        </div>
    </template>
    <script>
        Vue.component("comp1", {
            template: "#comp1",
            props: ["cmessage"],
            data() {
                return {
                    "cmess": this.cmessage
                }
            },
            methods: {
                changeMessage(event) {
                    console.log(event.target.value)
                    this.$emit("csyncchange", event.target.value)
                }
            },
            watch: {
                cmessage(val, oldval) {
                    console.log(val, oldval)
                    console.log()
                    this.cmess = val
                }
            }

        })
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
            methods: {
                syncchange(value) {
                    this.message = value
                }
            }
        });
    </script>
</body>
</html>

这一步的重点是watch方法. 同步cmessage的值给cmess. 看看效果

以上,完美实现了,父子组件的双向数据绑定.

二. 父子组件的相互访问

如果父组件想要访问子组件的属性和方法, 或者子组件想要访问父组件的属性和方法怎么办呢? 下面来看看:

1. 父组件访问子组件

父组件访问子组件有两种方式

1. 使用$children
2. 使用@refs

案例: 现在有一个父组件, 想要拿到子组件的方法或者变量.

使用$children获取

获取所有的子组件: this.$children
获取某个子组件的属性: this.$children.属性名
获取某个子组件的方法: this.$children.方法名()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>第一种方法: 使用children访问子组件</h1>
    <app1-comp></app1-comp>
    <app1-comp></app1-comp>
    <app1-comp></app1-comp>
    <button @click="btnclick">按钮</button>

</div>

<template id="comp1">
    <div>
        <p>只有app1才能使用的组件</p>
        <h2>{{name}}</h2>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    const app1Comp = Vue.extend({
        template: comp1,
        data() {
            return {
                name : "name名称"
            }
        },
        methods: {
            getchange() {
                console.log("getchange方法")
            }
        }

    })

    let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components:{
            app1Comp: app1Comp
        },
        methods: {
            btnclick() {
                console.log("点击事件", this.$children)
                console.log("父组件访问子组件的data数据: ",this.$children[1].name)
                console.log("父组件访问子组件的方法: ",this.$children[1].getchange())

            }
        }
    });

</script>
</body>
</html>

在dom中使用了三个comp1组件. 我们可以使用this.$children来获取所有的组件

这里获取到了3个组件, 并打印了第二个组件的名称和方法

使用@refs获取属性

使用refs的好处是可以根据组件名称获取. 而不是遍历, 因为遍历的下标时可能修改的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    父组件访问子组件有两种方式
    1. 使用$children
    2. 使用@refs

    需求: 现在有一个父组件, 想要拿到子组件的方法或者变量.
    所以, 我们先定义一个组件.

-->
<div id="app">
    <h1>第二种方法: 使用refs访问子组件</h1>
    <app2-comp ref="app21"></app2-comp>
    <app2-comp ref="app22"></app2-comp>
    <app2-comp ref="app23"></app2-comp>
    <button @click="btnclick">按钮</button>

</div>

<template id="comp1">
    <div>
        <p>只有app1才能使用的组件</p>
        <h2>{{name}}</h2>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    const app1Comp = Vue.extend({
        template: comp1,
        data() {
            return {
                name : "name名称"
            }
        },
        methods: {
            getchange() {
                console.log("getchange方法")
            }
        }

    })

    let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components:{
            app1Comp: app1Comp,
            app2Comp: app1Comp
        },
        methods: {
            btnclick() {

                console.log(this.$refs.app21.name)
                console.log(this.$refs.app21.getchange())
            }
        }
    });

</script>
</body>
</html>

这一次我们给组件起了名字, 通过$refs可以指定组件名,获取属性和方法

2. 子组件访问父组件

子组件访问父组件使用的是$parent
子组件访问根组件使用$root

通常new Vue()也是一个组件, 他是根组件. 如果子组件想要获取根组件的属性和方法,使用@root

下面这个例子, 是子组件comp1里面引用了另一个组件comp2. 在comp2中获取comp1的属性和方法, 使用@parent, 这就是子组件获取父组件的属性和方法

comp2要想获取new Vue()对象的属性和方法, 使用的是$root.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    父组件访问子组件有两种方式
    1. 使用$children
    2. 使用@refs

    需求: 现在有一个父组件, 想要拿到子组件的方法或者变量.
    所以, 我们先定义一个组件.

-->
<div id="app">
    <h1>子组件访问父组件</h1>
    <comp1></comp1>


</div>
<template id="comp1">
    <div>
        <comp2></comp2>
    </div>

</template>
<template id="comp2">
    <div>
        <p>组件comp2</p>
        <button  type="text" @click="btnClick">按钮</button>
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    const app1Comp = Vue.extend({
        template: comp1,
        data() {
            return {
                name: "name名称"
            }
        },
        components: {
            comp2: {
                template: comp2,

                methods: {
                    btnClick() {
                        console.log(this.$parent)
                        console.log(this.$parent.name)

                        // 获取root元素, 也就是vue元素
                        console.log(this.$root)
                        console.log(this.$root.message)
                    }
                }
            }
        }
    })

    let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components:{
            comp1: app1Comp
        },
        methods: {
            btnclick() {

            }
        }
    });

</script>
</body>
</html>