<!-- 父组件 Form.vue -->

<template>

    <div class="parent">

        <h3>问卷调查</h3>

       <!-- 注意这里，formData是自定义属性，用来向子组件传递数据，如果要想被子组件控制，必须加上 .sync，
请注意，现在新版本的vue可以不用写.sync-->

        <child :formData.sync="form"></child>

        <div class="">

            <p>姓名：{{form.name}}</p>

            <p>年龄：{{form.age}}</p>

            <p>地址：{{form.address}}</p>

        </div>

    </div>

</template>

<script>

import child from "../components/dialog.vue";//导入子组件

export default {

  components: {

    child

  },

  data: function() {//定义返回data

    return {

      form: {

        name: "",

        namePla: "姓名不能为空",

        address: "",

        age: ""

      }

    };

  }

};

</script>

<!-- 子组件 dialog.vue -->

<template>

    <div class="child">

        <label>

            姓名：<input :placeholder="form.namePla" type="text" v-model="form.name">

        </label>

        <label>

            年龄：<input type="text" v-model="form.age">

        </label>

        <label>

            地址：<input type="text" v-model="form.address">

        </label>

    </div>

</template>

<script>

export default {

  data: function() {//子组件返回data

    return {

      form: {

        name: "",

        namePla: "",

        age: "",

        address: ""

      }

    };

  },

  props: {

    // 这个 prop 属性用来接收父组件传递进来的值
    //这么写是为了说明，接受参数可以指定参数类型，你可以直接[“formData”]来接收，但是这个方法必须了解

    formData: Object//对象的形式

  },

  watch: {

    // 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行双向绑定到 input 上

    // 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form，因为 from 可以用来 绑定 input，就好像增加了一个跳板

    formData: {

      immediate: true,

      handler(val) {

        this.form = val;

      }

    }

  },

};

</script>

this.$emit('update:formData', newData)

<text-document

  v-bind:formData="form"

  v-on:update:formData="form = $event"

></text-document>

<text-document  v-bind:formData.sync="form"></text-document>

npm install vuex --save

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({

  // 初始化的数据

  state: {

    formDatas: null//定义一个变量 formDatas

  },

  // 改变state里面的值得方法

  mutations: {

    getFormData(state, data) {

      state.formDatas = data;

    }

  }

});

// 输出模块

export default store;

<!-- 父组件 parent.vue -->

<template>

    <div class="parent">

        <h3>问卷调查</h3>

        <child ></child><!-- 注意： 这里已经没有 .sync 了 -->

        <div class="">

            <br>

            <br>

            <p>数据：{{_fatherData}}</p>//感谢网友 @Mr.TangHao 的纠错

        </div>

    </div>

</template>

<script>

import child from "../components/dialogVuex.vue";

export default {

  components: {

    child

  },

  data: function() {

    return {

      form: {

        name: "",

        namePla: "姓名不能为空",

        address: "",

        age: ""

      }

    };

  },

  computed: {//挂载完成后

    _fatherData() {//获取全局 store 仓库中的 formDatas 值

      // 读取store里面的值，这里是重点

      return this.$store.state.formDatas;

    }

  }

};

</script>

<!-- 子组件 child.vue -->

<template>

    <div class="child">

        <label>

            姓名：<input  type="text" v-model="form.name">

        </label>

        <label>

            年龄：<input type="text" v-model="form.age">

        </label>

        <label>

            地址：<input type="text" v-model="form.address">

        </label>

    </div>

</template>

<script>

export default {

  data: function() {

    return {

      form: {

        name: "",

        namePla: "",

        age: "",

        address: ""

      }

    };

  },

  mounted() {

    // 将数据提交到 store

    this.$store.commit('getFormData', this.form)//感谢网友 @Mr.TangHao 的纠错

  }

};

</script>

import Vue from "vue";

import Router from "vue-router";

import Home from "./views/Home.vue";

import FormVuex from "./views/FormVuex.vue";

Vue.use(Router);

export default new Router({

  mode: "history",

  base: process.env.BASE_URL,

  routes: [

    {

      path: "/",

      name: "home",

      component: Home

    },

    {

      path: "/Vuex",

      name: "Vuex",

      component: FormVuex

    },

    {

      path: "/about",

      name: "about",

      // route level code-splitting

      // this generates a separate chunk (about.[hash].js) for this route

      // which is lazy-loaded when the route is visited.

      component: () =>

        import(/* webpackChunkName: "about" */ "./views/Form.vue")

    }

  ]

});

import Vue from 'vue'

import vuex from 'vuex'

Vue.use(vuex);

import dialog_store from './components/dialog_store.js';//引入某个store对象

export default new Vuex.Store({

    modules: {

        dialog: dialog_store

    }

})

export default {

   state: {

    formDatas: null

  },

  // 改变state里面的值得方法

  mutations: {

    getFormData(state, data) {

      state.formDatas = data;

    }

  }

}