Vue.js——父组件和子组件——2020.11.23

最新推荐文章于 2024-08-07 23:10:41 发布

Blockchain_KT

最新推荐文章于 2024-08-07 23:10:41 发布

阅读量365

点赞数 2

分类专栏： Vue.js-实战开发文章标签： vue python js javascript html

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

版权

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

64 篇文章 46 订阅

订阅专栏

父组件和子组件

一丶父组件和子组件

在前面我们看到组件树：
- 组件和组件之间存在层级关系
- 而其中一种非常重要的关系就是父子组件的关系
父子组件错误用法：以子标签的形式在Vue实例中使用
- 因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
- 该模块的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中内容了）
- 是只能在父组件中被识别的
- 类似这种用法，是会被浏览器忽略的

二丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/23 22:30-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>cpn2是cpn1的父组件</p>
  <cpn2></cpn2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 1.创建第一个组件
  const cpnC1 = Vue.extend({
    template:`
      <div>
        <h2>我是cpnC1</h2>
        <p>我是内容：Key</p>
      </div>
    `
  })
  // 2.创建第二个组件
  const cpnC2 = Vue.extend({
    template:`
      <div>
        <h2>我是cpnC2</h2>
        <p>我是内容：Blockchain</p>
        <cpn1></cpn1>
      </div>
    `,
    components:{
      cpn1 : cpnC1
    }
  })
  //可以看成根组件
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn2 :cpnC2
    }
  })
</script>
</body>
</html>