自定义子组件和父组件通信
- 在我们开发组件时, 子组件可能要求我们和父级组件进行沟通;
$emit 触发当前实例上的事件, 附加参数都会传给监听器回调;
eg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文章列表</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
<!-- tt是下面模板中自定义的2 -->
<test @tt='go'></test>
</div>
</body>
</html>
<script type="text/javascript">
var tes = {
// tt是随便定义的1, 这样写子组件就调用了父组件的方法,实现了通信,第二个参数就能传到下面函数中
template:`<button @click="$emit('tt','6666')">点我啊</button>`,
};
var articles = {
template:`
<ul>
<li></li>
</ul>
`,
}
var vm = new Vue({
el:'#app',
data:{
msg:"你好,红红",
articles:[
{title:'我是1'},
{title:'我是2'},
{title:'我是3'},
{title:'我是4'},
],
},
components:{
'test':tes,
},
methods:{
go:function(data){
// alert("gogogogo");
this.msg=data
}
}
});
</script>
2725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
