1.prop方式
适用于父子组件传值
注意：如果父组件给子组件传递的是函数，则是子向父传值
<template>
<div class="parent">
<son :famsg="getmsg"></son> //子组件绑定famsg变量
</div>
</template>
<script>
import son from './son' //引入子组件
export default {
name: 'parent',
components:{son}, //使用子组件
methods:{
getmsg(sonMsg){
console.log('子组件中传回的参数',sonMsg);
}
},
}
</script>
<template>
<div class="son">
<button @click="sendmsg">sendmsg</button>
</div>
</template>
<script>
export default {
name: 'son',
props:[ 'famsg' ],
data () {
return {
sonMsg: '我是子组件要传的参数',
}
},
methods: {
sendmsg(){
return this.famsg(this.sonMsg) //返回父组件的方法并携带子组件的参数
}
},
}
</script>
注意：如果父组件给子组件传递的是非函数，则是父向子传值
路由props传值的3种方式：1.布尔值 2. 对象 3.函数
2.自定义事件（
on)
适用于子组件(
on（'传递函数名‘，回调函数func（e）{this.XXX=e}））
3.全局事件总线（this.$bus)
适用全局this.XXX=e
Vue.prototype.$bus = this
4.pubsub.js (发布与订阅，一般用在react)
适用全局
5.vueX
适用全局
6.插槽
适用结构
默认插槽
具名插槽
作用域插槽
