【前言】
…
【目标】
1 了解组件间传参
2 组件间自定义事件绑定与解绑
3 组件的事件总线
4 消息订阅与发布
一 组件间传参
1 props
引入并使用组件:传递参数
<template><div id="app"><HelloWorld :msg="msg" :name="name" :edit="edit"/></div>
</template><script>
import HelloWorld from './components/HelloWorld/index.vue'
export default {name: 'App',components: {HelloWorld},data(){return{msg:'你好呀!',name:'张三'}},methods:{edit(m,n){console.log('接收到组件传递的数据',m,n)this.msg = mthis.name= n}}
}
</script>
</script>
组件用props接收参数
props可以接收data中所有的参数,也可以接收父组件传过来的methods方法
<template><div class="hello"><h1>{{ msg }}{{ name }}</h1><button @click="send">发送消息</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: {type:String,default:'',},name: {type:String,// required:true},edit:{type:Function}},data(){return{// name:'王五'}},methods: