手记：Vue.js 入门

#手记

1. 父组件 a 中引入子组件 aB

1.1. 父组件引入

• 在父组件 a.vue 的原有代码上新增如下内容：

  <script>
    // 传入子组件名称及其引用路径（Pre 表可能的前缀）；
    import PreAB from '../aB.vue';
    module.exports = {
      data() {
        return {
          // 在数据中添加驼峰命名的前端接口；
          aB: '';
        }
      }
      components: {
        // 在组件中引入子组件名称；
        PreAB,
      },
      methods: {
        // 在方法中同步前后端接口（如若需要）；
        someIO.someMethod({
          a_b: this.aB,
        })
      }
    }
  </script>
  <pre-a-b
    :a-b.sync="aB">
  </pre-a-b>

1.2. 子组件内容

• 一般而言子组件 aB.vue 的内容：

  <style scoped lang="sass">
    /* scoped表本组件私有 */
  </style>
  <script>
    module.exports = {
      // 定义组件名称；
      name: 'AB',
      props: {
        // 定义前端接口，驼峰命名；
        aB: {
          type: String
        }
      },
      methods: {
        handleSth: function() {
        }
      }
    };
  </script>
  <template>
    <div
      v-model="aB"
      @click="handleSth">
    </div>
  </template>

2. 子组件 aB 中传入父组件 a 参数

2.1. 父组件中子组件标签上同步参数

  <a-b
    :a="a">
    <!-- 传入前端自定义字段 -->
  </a-b>

2.2. 子组件传入参数

  props: {
    a: {
      type: Object,
    }
  },

3. 其它

3.1. 在路由中创建 API 接口

• 注意命名的方法需要与 someIO 文件中指定的 someMethod 方法一致；

3.2. 前端执行

  <script>
    module.exports = {
      methods: {
        handleSth() {
          someIO.someMethod ({
            // 执行代码；
          }).then(() => {
            // 输入后续；
          }).catch(err => {
            // 报错处理；
          });
        }
      }
    }
  </script>

附：参考

• Vue.js API手册
• Vue.js-数据驱动的组件化前端开发-1
• Vue.js-数据驱动的组件化前端开发-2