[关闭]
@EncyKe 2016-10-26T02:53:23.000000Z 字数 1049 阅读 1299

手记:Vue.js 入门

#手记



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

1.1. 父组件引入

  1. <script>
  2. // 传入子组件名称及其引用路径(Pre 表可能的前缀);
  3. import PreAB from '../aB.vue';
  4. module.exports = {
  5. data() {
  6. return {
  7. // 在数据中添加驼峰命名的前端接口;
  8. aB: '';
  9. }
  10. }
  11. components: {
  12. // 在组件中引入子组件名称;
  13. PreAB,
  14. },
  15. methods: {
  16. // 在方法中同步前后端接口(如若需要);
  17. someIO.someMethod({
  18. a_b: this.aB,
  19. })
  20. }
  21. }
  22. </script>
  23. <pre-a-b
  24. :a-b.sync="aB">
  25. </pre-a-b>

1.2. 子组件内容

  1. <style scoped lang="sass">
  2. /* scoped表本组件私有 */
  3. </style>
  4. <script>
  5. module.exports = {
  6. // 定义组件名称;
  7. name: 'AB',
  8. props: {
  9. // 定义前端接口,驼峰命名;
  10. aB: {
  11. type: String
  12. }
  13. },
  14. methods: {
  15. handleSth: function() {
  16. }
  17. }
  18. };
  19. </script>
  20. <template>
  21. <div
  22. v-model="aB"
  23. @click="handleSth">
  24. </div>
  25. </template>

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

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

  1. <a-b
  2. :a="a">
  3. <!-- 传入前端自定义字段 -->
  4. </a-b>

2.2. 子组件传入参数

  1. props: {
  2. a: {
  3. type: Object,
  4. }
  5. },

3. 其它

3.1. 在路由中创建 API 接口

3.2. 前端执行

  1. <script>
  2. module.exports = {
  3. methods: {
  4. handleSth() {
  5. someIO.someMethod ({
  6. // 执行代码;
  7. }).then(() => {
  8. // 输入后续;
  9. }).catch(err => {
  10. // 报错处理;
  11. });
  12. }
  13. }
  14. }
  15. </script>

附:参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注