和组件进行双向绑定(笔记)

Posted First·林肯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了和组件进行双向绑定(笔记)相关的知识,希望对你有一定的参考价值。

1、通过关键字sync进行绑定

<!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">
    <p>父组件:{{ title }}</p>
    <hr>
    <custon :title.sync="title" :cunt.sync=‘cunt‘></custon>
</div>
</body>
<script src="./vue.js"></script>
<script>
/*
    对props进行双向绑定
    sync关键字   update是固定写法关键字-----this.$emit(‘update:cunt‘,‘str‘)
*/

Vue.component(‘custon‘,{
    props:[‘title‘,‘cunt‘],
    template:`
        <div class="box">
            <h2>{{ title }}</h2>
            <div>
                {{cunt}}    
            </div>
            <button @click="cheng">
                按钮
            </button>
        </div>
    `,
    methods:{
        cheng(){
            console.log("123")
            this.$emit(‘update:title‘,‘子组件改变‘)
            this.$emit(‘update:cunt‘,‘2‘)
        }
    }
})

new Vue({
    el:"#app",
    data:{
        title:‘父组件的title‘,
        cunt:1
    }
})
</script>
</html>

  

2、通过v-model对组件进行绑定

<!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">
    <p>父组件:{{ obj.title }}</p>
    <hr>
    <custon v-model=‘obj‘></custon>
</div>
</body>
<script src="./vue.js"></script>
<script>
/*
    这里的v-model是属于一个自定义的绑定
    title是绑定的数据
    子组件通过 props来接收一个value
    子组件通过$emit来绑定input事件来进行双向绑定----this.$emit(‘input‘,‘子组件改变‘)
*/

Vue.component(‘custon‘,{
    props:[‘value‘],
    template:`
        <div class="box">
            <h2>{{ value.title }}</h2>
            <div>{{ value.center }}</div>
            <div>{{ value.sum }}</div>
            <button @click="cheng">
                按钮
            </button>
        </div>
    `,
    data(){
        return {
            Zobj:{}
        }
    },
    methods:{
        cheng(){
            console.log(this.value)
            let objs = {
                    title:‘子组件title‘,
                    center:‘子组件内容‘,
                    sum:"bbb"
                }
            this.$emit(‘input‘,objs)
        }
    }
})

new Vue({
    el:"#app",
    data:{
        obj:{
            title:‘父组件title‘,
            center:‘父组件内容‘,
            sum:‘aaa‘
        },
    }
})
</script>
</html>

  

3、通过v-model和组件进行绑定,传输一个对象

<!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">
    <p>父组件:</p>
    <p>1、{{ arr.list[0] }}</p>
    <p>2、{{ arr.list[1] }}</p>
    <p>{{arr.bbq}}</p>
    <hr>
    <custon v-model=‘arr‘></custon>
</div>
</body>
<script src="./vue.js"></script>
<script>
/*
    这里的v-model是属于一个自定义的绑定
    arr是绑定的数据
    子组件通过 props来接收一个value
    子组件通过$emit来绑定input事件来进行双向绑定----this.$emit(‘input‘,‘子组件改变‘)
*/

Vue.component(‘custon‘,{
    props:[‘value‘],
    template:`
        <div class="box">
            {{value}}
            <button :class="value.list[0]" @click="cheng">
                按钮
            </button>
        </div>
    `,
    methods:{
        cheng(){
            console.log(this.value)
            let arr2 = {    
                list:this.value.list.reverse(),
                bbq:!this.value.bbq
            }   
            this.$emit(‘input‘,arr2,)
        }
    }
})

new Vue({
    el:"#app",
    data:{
        arr:{
            list:[‘a‘,‘b‘],
            bbq:false
        }
    },
    updated(){
        console.log("数据发生了改变")
        console.log(this.arr.bbq)
    }
})
</script>

<style>
.a{
    display:block;
    width:50px;
    height:50px;
    background:#FAF;
}
.b{
    display:block;
    width:50px;
    height:50px;
    background:#F60;
}
</style>
</html>

  

以上是关于和组件进行双向绑定(笔记)的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs双向绑定

3-6 组件的双向绑定

通过多个组件进行双向绑定

Vue 3 通过双向绑定将反应对象传递给组件

Vue3的双向绑定是如何实现的

Vue父子组件双向数据绑定