【Vue】组件间传参与方法调用

【前言】
…
【目标】

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: