和组件进行双向绑定(笔记)
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>
