(四)最简单的vue教程,开发自己的电影网站:常用指令、父组件调用子组件方法、组件的this指向介绍

avatar

上一节把组件都创建完了,这一节来说一下组件之前调用的一些细节(用法)

  • 组件间传值
  • 引用组件
  • 常用指令
  • 父组件调用子组件方法
  • 组件的this指向

前两个在前面已经说过了,这里不在介绍

常用指令

常用的指令有 v-if v-for

用法

<template>
<div v-for="item in list" v-bind:key="item.id">{{item.title}}</div>
<div v-if="loading">loading...</div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        list: [{
          title: 'title1'
        }, {
          title: 'title2'
        }]
      }
    }
  }
</script>

当使用 v-for 的时候,要同时加上 v-bind:key 表示循环dom的唯一性 v-bind:key="item.id" 这个也是固定写法,其中item是循环的变量,也就是说如果 v-for 里循环变量是 val 那么这里就要写成 val.id

v-if 后面紧跟上 v-else 可以实现 if else 语法,如果不是紧跟着的话,那这个语法则会失效,对应的还有 v-else-if 指令,也是要紧跟着使用的

父组件调用子组件方法

使用vue组件开发的时候,这个问题是经常碰到的,用法也很简单

父组件 List.vue

<template>
<div>
  <div class="list">
    <Item ref="item"/>
  </div>
</div>
</template>
<script>
  import Item from "./Item";
  export default {
    components: {
      Item
    },
    mounted() {
      this.fetchData(this.tab);
    },
    methods: {
      fetchData() {
        // 模拟网络请求
        setTimeout(() => {
          // 请求成功,将请求的数据传给子组件渲染
          var list = []; // 假设list是请求接口拿到的列表数据
          this.$nextTick(() => {
            this.$refs.item.loadData(list);
          });
        }, 2000);
      }
    }
  }
</script>

子组件 Item.vue

<template>
<div>
  <div class="item" v-for="item in list" v-bind:key="item.id">
    {{item.title}}
  </div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        list: []
      };
    },
    methods: {
      loadData(list) {
        this.list = list;
      }
    }
  };
</script>

说明

  1. 首先子组件里要有一个供父组件调用的方法 ,我这里定义的是 loadData(list)
  2. 在父组件里引用子组件的时候要给一个引用 ref 我这里给的是 ref="item"
  3. 然后就可以在父组件里调用子组件里的方法了,固定写法
this.$nextTick(() => {
  this.$refs.item.loadData(list);
});

组件的this指向

这个一般新手会比较晕,因为js里函数有两种写法,对应的this就有两种指向,首先看一下这个

export default {
  methods: {
    fetchData() {
      // 模拟网络请求
      setTimeout(function() {
        // 请求成功,将请求的数据传给子组件渲染
        var list = []; // 假设list是请求接口拿到的列表数据
        this.$nextTick(() => {
          this.$refs.item.loadData(list);
        });
      }, 2000);
    }
  }
};

这里的this指向的就是setTimeout这个函数,而不是全局的 vue 对象,所以这时候调用vue内置对象this.$nextTick()的时候会报错说找不到对象

如果这里把它改成箭头函数就不会有这问题了,如下所示,vue默认配置了babel,可以将高级语法转成浏览器能认识的能用的js语法,所以在vue项目里就不要用上面那种方式来定义函数了

export default {
  methods: {
    fetchData() {
      // 模拟网络请求
      setTimeout(() => {
        // 请求成功,将请求的数据传给子组件渲染
        var list = []; // 假设list是请求接口拿到的列表数据
        this.$nextTick(() => {
          this.$refs.item.loadData(list);
        });
      }, 2000);
    }
  }
};
0 条评论

目前还没有回答,快来帮帮TA吧!

添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录