子组件使用父组件中methods中的方法，和数据传递差不多，只不过接收的方法不一样，接受方法使用的是$emit()
$emit()触发当前实例上的事件。附加参数都会传给监听器回调(也就是会把子组件的参数传递给父组件)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div>
{{title}}
</div>
<!-- 需要在这里把父组件的事件传递给子组件 -->
<child @show="show"></child>
</div>
<script type="text/template" id="child">
<button @click="change">子组件</button>
</script>
<script>
var child={
template:'#child',
mounted(){
},
created(){
},
methods:{
change(){
this.$emit('show','我是子组件传递给父组件的参数')
}
}
}
new Vue({
el:'#app',
data:{
title:'hello Vue'
},
components:{
child
},
methods:{
show(val){
console.log('我是父组件中的事件'+val)
}
}
})
</script>
</body>
</html>或者在子组件中使用this.$parent获取父组件的方法和属性
console.log(this.$parent)
小结：子组件使用父组件的方法，需要父组件先传递给子组件，然后子组件使用$emit()来调用
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接