Vue组件化第一天

最新推荐文章于 2023-08-01 14:18:50 发布

是楷不是凯

最新推荐文章于 2023-08-01 14:18:50 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/weixin_44616545/article/details/107342543

版权

Vue组件化

在这里插入图片描述

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

</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  })

  // 2 注册组件
  Vue.component('my-cpn', cpnC);

  const app = new Vue({
    el:'#app'
  })
</script>



</html>

在这里插入图片描述

全局组件以及局部组件

此时为全局组件，我们在别的实例中也可以使用

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

</div>
<div id = 'app2'>
  <my-cpn></my-cpn>
</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  })

  // 2 注册组件 此时的组件时全局的。
  Vue.component('my-cpn', cpnC);

  const app = new Vue({
    el:'#app'
  })

  const app2 = new Vue({
    el:'#app2'
  })
</script>



</html>

此时的效果图
在这里插入图片描述

因为有两个实例 'app ’ 与 'app2‘ 我们的组件是全局的，那么就都可以使用

局部组件，我们只要把组件写入到实例中即可。

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

</div>
<div id = 'app2'>
  <cpn></cpn>
</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  });

  // 2 注册组件 此时的组件时全局的。
  // Vue.component('cpn', cpnC);

  const app = new Vue({
    el:'#app',
    components:{
      cpn : cpnC
    }
  })

  const app2 = new Vue({
    el:'#app2'
  })
</script>



</html>

只在第一个实例中有，第二个实例中没有，所以第二个不显示
在这里插入图片描述

是楷不是凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化第一天

Vue组件化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><my-cpn> </my-cpn></div></body><script src="
复制链接

扫一扫