一篇文章带你深入浅出Vuex

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在写Vuex之前，我们先用一个简单的例子来实现一个小demo

大家都知道Vue的父传子用在很多场景，比如像这样：

父组件：

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

子组件：

<template>

  <div id="product-list-one">

    <div>{{msg}}</div>

  </div>

</template>

<script>

props:['msg']

</script>

有父传子，当然也有子传父：

子组件：

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

父组件：



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