一、组件之间的传参：
1.父组件传子组件：通过props
2.子组件传父组件：自定义事件
父组件：vue实例；
子组件：<my-button></my-button>
<my-button></my-button>是放在vue实例挂载点的内部
二、父组件传子组件
<body>
<div id="app">
<h1>时间戳：{{dt}}</h1>
<!-- 使用全局组件 -->
<my-button :name="myname"></my-button>
</div>
</body>
<script type="text/javascript">
//定义全局组件component；页面/vue实例
//命名；短横杆，驼峰，帕斯卡
Vue.component('my-button',{
template:'<div>{{msg}}<button @click="fa">全局组件按钮</button><br>name={{name}}</div>',//有且只有一个跟标签
props:['name','sex','age'],
data(){
return{
msg:'全局组件测试'
}
},methods:{
fa(){
console.log("父组组件传来的参数name：",this.name);
}
}
});
//创建vue实例
vm = new Vue({
el:'#app',
data:{
dt:new Date().getTime(),
myname:'李四'
},
methods:{
},
//局部组件
components:{
'my-input':{
template:'<div><input/></div>',
data(){
},methods:{
}
},
}
});
</script>
三、子组件传父组件
<body>
<div id="app">
<h1>时间戳：{{dt}}</h1>
<!-- 使用全局组件 -->
<my-button :name="myname" @threeclick='funParent'></my-button>
</div>
</body>
<script type="text/javascript">
//定义全局组件component；页面/vue实例
//命名；短横杆，驼峰，帕斯卡
Vue.component('my-button',{
template:'<div>{{msg}}<button @click="doClick2">全局组件按钮</button><br>name={{name}}</div>',//有且只有一个跟标签
props:['name','sex','age'],
data(){
return{
msg:'全局组件测试',
count:0,
arg:'子组件的参数'
}
},methods:{
fa(){
console.log("父组组件传来的参数name：",this.name);
},
doClick(){
//该事件的触发条件就是doClick被执行
this.$emit('dj');
},
doClick2(){
this.count++;
//鼠标三击事件
if(this.count % 3 == 0){
this.$emit('threeclick',this.arg);
}
}
}
});
//创建vue实例
vm = new Vue({
el:'#app',
data:{
dt:new Date().getTime(),
myname:'李四'
},
methods:{
//触发子组件的自定义事件的时候调用该方法
//在父组件触发子组件自定义事件的时候，子组件所传来过来的参数
funParent(e){
console.log("触发子组件的自定义事件dj，参数：%s",e);
}
},
//局部组件
components:{
'my-input':{
template:'<div><input/></div>',
data(){
},methods:{
}
},
}
});
</script>
版权声明：本文为weixin_62322136原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。