学习vue笔记（4）

最新推荐文章于 2023-03-29 16:22:06 发布

明月挽我心

最新推荐文章于 2023-03-29 16:22:06 发布

阅读量251

点赞数 1

分类专栏：前端文章标签： javascript vue.js

本文链接：https://blog.csdn.net/xxxxxii/article/details/117046717

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

组件化开发

一、组件化的基本使用

注册组件的三步骤：
1、创建组件构造器：调用Vue.extend()创建一个组件构造器，使用template代表自定义模板

const cpnC = Vue.extend({
  template:`<div>
              <h2>组件标题</h2>
              <p>组件内容</p>
            </div>`
})

2、注册组件：调用Vue.components()将组件构造器注册为一个组件

Vue.component('my-cpn',cpnC)

3、使用组件：组件挂载在Vue实例下，否则不会生效

<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

显示结果：
在这里插入图片描述

二、全局组件和局部组件

1、全局组件

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

<div id="app1">
  <my-cpn></my-cpn>
</div>
<div id="app2">
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  const myComponent = Vue.extend({
    template:`
    <div>
    <h2>组件标题</h2>
    <p>组件内容：今天真开心</p>
    </div>
    `
  })
  Vue.component('my-cpn',myComponent)

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

</body>
</html>

在这里插入图片描述
2、局部组件（此时显示的是局部组件，为id=app1里的内容，app2内容没有被渲染出来。因为将组件构造器放进了实例1中）

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

<div id="app1">
  <my-cpn></my-cpn>
</div>
<div id="app2">
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  const myComponent = Vue.extend({
    template:`
    <div>
    <h2>组件标题</h2>
    <p>组件内容：今天真开心</p>
    </div>
    `
  })

  const app1 = new Vue({
    el:"#app1",
    components:{
      'my-cpn':myComponent
    }
  })
  const app2 = new Vue({
    el:"#app2"
  })
</script>

</body>
</html>

在这里插入图片描述

三、父组件和子组件

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

<div id="app">
  <cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
  const cpnC1 = Vue.extend({
    template:`
     <div>
       <h2>我是儿子标题</h2>
       <p>我是儿子内容,哈哈哈</p>
     </div>
    `
  })
  const cpnC2 = Vue.extend({
    template:`
     <div>
       <h2>我是爸爸标题</h2>
       <p>我是爸爸内容,啦啦啦</p>
     </div>
    `,
    components:{
      cpn1:cpnC1
    }
  })

  const app = new Vue({
    el:"#app",
    data:{
      message:"你好"
    },
    components: {
      cpn2:cpnC2
    }
  })
</script>

</body>
</html>

在这里插入图片描述
注意:父组件构造器中放入了儿子组件，当使用组件时，会调用父亲组件中的内容，而不会显示儿子组件中的内容。实例中也使用父组件构造器

明月挽我心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue笔记（4）

组件化开发一、组件化的基本使用注册组件的三步骤：1、创建组件构造器：调用Vue.extend()创建一个组件构造器，使用template代表自定义模板const cpnC = Vue.extend({ template:`<div> <h2>组件标题</h2> <p>组件内容</p> </div>`})2、注册组件：调用Vue.compon
复制链接

扫一扫