在写Vuex之前，我们先用一个简单的例子来实现一个小demo
大家都知道Vue的父传子用在很多场景，比如像这样：
代码语言：javascript复制父组件：
<template>
<div id="app">
<product-list-one :msg='msg'></product-list-one>
</div>
</template>
<script>
export default {
name: 'app',
components:{
'product-list-one':ProductListOne,
},
data () {
return {
msg:'love'
}
}
}
</script>子组件：
代码语言：javascript复制<template>
<div id="product-list-one">
<div>{{msg}}</div>
</div>
</template>
<script>
props:['msg']
</script>有父传子，当然也有子传父：
子组件：
代码语言：javascript复制<template>
<div id="product-list-one">
<button @click="but">点击</button>
</div>
</template>
<script>
data(){
return {
txt:'hello'
}
},
methods:{
but() {
this.$emit('get',this.txt);
}
}
</script>父组件：
代码语言：javascript复制<template>
<div id="app">
<product-list-one :msg='msg' @get='world'></product-list-one>
</div>
</template>
<script>
import ProductListOne from './components/ProductListOne.vue'
export default {
name: 'app',
components:{
'product-list-one':ProductListOne
},
methods:{
world(data){
console.log(data)
}
}
}
</script>更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119250852
