1、父组件传参子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>这是在父组件中使用数据:{{num}}</p>
<button @click="change()">按钮</button>
<v-header :a="num"></v-header>
</div>
<template id="header">
<div>
<h1>这是头部 {{m}}</h1>
<button @click="change()">按钮</button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
var header={
template:'#header',
data(){
return {
msg:'这是子组件数据',
m:this.a,
}
},
watch:{
a(){
this.m=this.a;
}
},
props:['a'],
methods:{
change(){
this.m+=2;
}
}
}
new Vue({
el:'#app',
data:{
num:'这是父组件数据'
},
methods:{
change(){
this.num+=1;
}
},
components:{
'v-header':header
}
})
</script>
</body>
</html>
父组件的值传递给子组件
1、在占位符中 :a="fmsg" 中a代表子组件中需要接收的数据，而 fmsg则是父组件数据
2、在子组件中定义属性 props 接收a props:['a']
3、在子组件中可以直接使用a
4、父组件传递给子组件的值可以修改，但是修改的时候，会有警告(可以选择忽略,可以通过watch监听数据解决该问题)。修改值的时候，父组件不会跟着变化
子组件传参给父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>这是在父组件中使用数据:{{t}}{{z}}</p>
<button @click="change()">按钮</button>
<v-header @send="get"></v-header>
</div>
<template id="header">
<div>
<h1>这是头部 </h1>
<button @click="change()">按钮</button>
{{fn()}}
</div>
</template>
<script src="js/vue.js"></script>
<script>
var header={
template:'#header',
data(){
return {
num:'这是子组件的数据',
zsh:'这是子组件数据1111'
}
},
methods:{
fn(){
this.$emit('send',this.num,this.zsh)
},
change(){
this.num+=1;
console.log(this.num)
}
}
}
new Vue({
el:'#app',
components:{
'v-header':header
},
data:{
msg:'这是父组件的数据',
t:'',
z:''
},
methods:{
get(a,b){
this.t=a;
this.z=b;
}
}
})
</script>
</body>
</html>
子组件传参给父组件
1、在子组件中定义一个方法(该方法用来定义事件)。方法内部定义事件 this.$emit('事件名',所需要发送的数据(发送给父组件的数据))
2、在占位符中 @事件名(在子组件中定义的事件)="方法名(不加括号，需要在父组件中定义)"
3、在父组件中，定义接收数据的方法
4、在子组件中，执行刚刚定义的事件方法。
|