1.vue 实现修改子组件的数据,父组件的数据也跟着变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<title>父组件给子组件传参</title>
</head>
<body>
<div id="app">
<p>这是父组件中的数据:{{numObj.num}}</p>
<button @click="change()">父组件,修改父组件数据</button>
<hr>
<v-header :a="numObj"></v-header>
</div>
<template id="header">
<div>
<h1>这是子组件: {{xx.num}}</h1>
<button @click="change()">子组件,修改父组件数据</button>
</div>
{{fn()}}
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
// 自定义组件
var vheader = {
template: '#header',
data() {
return{
msg: '这是子组件数据',
xx: this.a
}
},
watch:{
// 监听变量a的变化,如果a有变化的时候,直接赋值给m。相当于找了个m来接收数据
a(){
this.xx = this.a;
}
},
props: ['a'],//接收父组件参数
methods:{
change() {
this.xx.num += 2;//子组件修改父组件参数
}
}
}
new Vue({
el: '#app',
data: {
numObj: {
num: '这是父组件参数'
}
},
methods:{
change() {
this.numObj.num += 1;
}
},
components:{
'v-header': vheader
}
})
</script>
</body>
</html>
2.实现修改父组件的数据,子组件的数据也跟着变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<title>子组件给父组件传参</title>
</head>
<body>
<!-- 父组件 -->
<div id="app">
<h1>这是父组件- {{msg}}</h1>
<p>父组件用的子组件的数据:{{childMsg.child}} +++ {{childMsg.last}}</p>
<button @click="chang()">父组件,修改子组件数据</button>
<hr>
<!-- 子组件 -->
<v-head @sends ='getNewMsg'></v-head>
</div>
<template id="vhead">
<div>
<h2>111这是子组件!</h2>
<p>子组件自己的数据: {{msg.child}}</p>
<!-- 自动触发fn方法 -->
{{fn()}}
<button @click="chang()">子组件,修改子组件数据</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var vhead = {
template: '#vhead',
data() {
return {
msg: {//子组件要传递的参数,对象
child: '子组件数据111--',
last:'子组件数据222--'
}
}
},
methods: {
fn() {//子组件内部自定义传参方法
this.$emit('sends',this.msg)
},
chang() {
this.msg.child += 3
}
}
}
new Vue({
el: '#app',
data: {
msg: '*这是父组件数据!*',
childMsg: ''
},
components: {
'v-head': vhead
},
methods:{
getNewMsg(obj) {
// 把子组件数据传递给父组件
this.childMsg = obj
},
chang() {
this.childMsg.child += 6
}
}
})
</script>
</body>
</html>