Vue.js：父组件和子组件

最新推荐文章于 2024-09-25 00:15:00 发布

ikunsdc

最新推荐文章于 2024-09-25 00:15:00 发布

阅读量423

点赞数

文章标签： vue.js javascript

By ikunsdc

本文链接：https://blog.csdn.net/m0_55331605/article/details/114199210

版权

一、父组件和子组件

组件的注册：

一个组件可以在Vue实例中注册
也可以在另一个组件中注册。

父子组件：

组件和组件之间存在层级和嵌套关系
如果组件1中引入了组件2，那么组件1称为组件2的父组件。

父子组件的调用和生效：

在哪注册在哪范围生效
子组件时全局组件，则vue实例可调用
否则，子组件仅在父组件注册，则仅能在父组件调用，不能在vue实例调用。

二、代码

<!--作者: ikunsdc -->
<!--日期Date: Do not edit -->

<!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>我是标题1（cpnC1）</h2>
        <p>我是内容：哈哈哈</p>
      </div>
    `
  })
  // 2.创建第二个组件构造器
  const cpnC2 = Vue.extend({
    template:`
      <div>
        <h2>我是标题2（cpnC2）</h2>
        <p>我是内容：，呵呵呵</p>
        <cpn1></cpn1>           <!--在组件2中引入组件1-->
      </div>
    `,
    components:{               // 在组件cpnC2中注册cpnC1
      cpn1 : cpnC1
    }
  })
  //可以看成根组件
  const app = new Vue({
    el:"#app",
    data:{
        message:"你好呀"
    },
    components:{
      cpn2 :cpnC2              //在该Vue实例中注册组件2即可。
    }
  })
</script>
</body>
</html>