理解Vue中的『编译作用域』

最新推荐文章于 2021-04-02 11:18:03 发布

莫余

最新推荐文章于 2021-04-02 11:18:03 发布

阅读量326

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44824148/article/details/113055166

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

编译作用域

先来考虑下面的代码是否最终是可以渲染出来的：

<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性。isShow属性包含在组件中，也包含在Vue实例中。

**答案：**最终可以渲染出来，也就是使用的是Vue实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

而在使用<my-cpn v-show="isShow"></my-cpn>的时候，整个组件的使用过程是相当于在父组件中出现的。

那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn v-show="isShow"></cpn>
  <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容, 哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>
</html>