Vue父组件和子组件

最新推荐文章于 2024-03-25 13:01:07 发布

我是你要找的bug

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量136

点赞数

分类专栏： Vue 组件文章标签： vue 父子组件

本文链接：https://blog.csdn.net/XUYIGE/article/details/108486978

版权

Vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

组件

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  
  <div id="app">
   <cpn2></cpn2> 
     <!-- <cpn1></cpn1> -->
   
  </div>
  
  <script src="js/vue.js"></script>
  <script>
   //1、创建第一个组件构造器(子组件)
   const cpnC1 = Vue.extend({
    template:`
    <div>
    <h2>我是标题1</h2>
    <p>我是内容：哈哈哈</p>
    </div>
    `
   })
   //2、创建第二个组件构造器（父组件）
   const cpnC2 = Vue.extend({
    template:`
    <div>
    <h2>我是标题2</h2>
    <p>我是内容：呵呵呵</p>
    <cpn1></cpn1>
    </div>
    `,
    components:{
     cpn1:cpnC1
    }
    
   })
   //root（根）组件
   const app = new Vue({
    el:"#app",
    data:{
     message:"nihao"
    },
    components:{ 
     cpn2:cpnC2,
     //cpn1:cpnC1 
    }
   })
  </script>
 </body>
</html>