Vue.js——编译作用域的概念——2020.12.8

最新推荐文章于 2022-04-26 11:34:24 发布

Blockchain_KT

最新推荐文章于 2022-04-26 11:34:24 发布

阅读量267

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue java js 编程语言 javascript

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110870907

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

编译作用域的概念

一丶编译作用域

在真正学习插槽之间，我们需要首先理解一个概念：编译作用域
官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念
我们来考虑下面的代码是否最终是可以渲染出来的
<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性 isShow属性包含在组件中，也包含在Vue实例中
我们可以从下面的案例代码运行结果得出：都只作用于当前作用域

二丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/12/8 12:55-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容，key</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vue = new Vue({
    el:"#app",
    data:{
      message:'hello,key',
      isShow:true
    },
    components:{
      cpn:{
        template:'#cpn',
        data(){
          return{
            isShow:false
          }
        }
      }
    }
  })
</script>
</body>
</html>

三丶运行结果

在这里插入图片描述

——钟鼓馔玉不足贵，但愿长醉不愿醒——

Blockchain_KT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue.js——编译作用域的概念——2020.12.8

编译作用域的概念一丶编译作用域二丶案例代码三丶运行结果——钟鼓馔玉不足贵，但愿长醉不愿醒——一丶编译作用域在真正学习插槽之间，我们需要首先理解一个概念：编译作用域官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念我们来考虑下面的代码是否最终是可以渲染出来的<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性 isShow属性包含在组件中，也包含在Vue实例中我们可以从下面的案例代码运行结果得出：都只作用于当
复制链接

扫一扫