vue中子组件给父组件传参
1、在子组件中定义方法 this.$emit(‘事件名’,数据)
2、在占位符中 @事件名=‘父组件中的方法(方法不加括号)’
3、在父组件中定义方法,并且进行数据接收
4、在子组件中自调用第一步定义的方法。
案例:
<body>
<div id="app">
<h1>这是父组件{{msg}}{{t}}</h1>
<!-- 2、在占位符中 @事件名='父组件中的方法(方法不加括号)' -->
<v-header @send="get"></v-header>
</div>
<template id="header">
<div @click="change()">
这是子组件
<!-- 4、在子组件中自调用第一步定义的方法。 -->
{{fn()}}
</div>
</template>
<script src="js/vue.js"></script>
<script>
var header={
template:'#header',
data(){
return {
cmsg:'这是子组件的数据',
n:0
}
},
methods:{
change(){
this.n++
},
// 1、在子组件中定义方法 this.$emit('事件名',数据)
fn(){
this.$emit('send',this.cmsg,this.n)
}
}
}
new Vue({
el:'#app',
components:{
'v-header':header
},
data:{
msg:'',
t:0
},
methods:{
// 3、在父组件中定义方法,并且进行数据接收
get(n,m){
this.t=m;
this.msg=n;
console.log(n)
}
}
})
</script>
</body>