自定义子组件和父组件通信

在我们开发组件时, 子组件可能要求我们和父级组件进行沟通;

$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>

$emit自定义子组件和父组件通信

自定义子组件和父组件通信

eg

最新文章

热门文章