对于子父组件的初步理解前奏

最新推荐文章于 2023-07-28 16:59:09 发布

千锤百炼的坏孩子

最新推荐文章于 2023-07-28 16:59:09 发布

阅读量166

点赞数

分类专栏： Vue的困惑

本文链接：https://blog.csdn.net/qq_36829724/article/details/78823008

版权

Vue的困惑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<body>
    <div  id="box">
        <Son></Son>
        <Father></Father>

    </div>
</body>

/*  
      刚刚我用的组件跟组件和全局组件
      好了，现在我用一下，局部组件
      这里得用到 components这个属性

*/
    //首先我创建两个组件。
    var Father= {
      data : function(){
        return{
          msg : '我是老子，我有老子的数据'
        }
        },
        template: `<div>我是老子组件————————————》老子的数据{{msg}}</div>`
    }  

    var Son ={
      data : function(){
        return{
          msg : '我是儿子，我是儿子，我是儿子'
        }
        },
        template: `<div>生怕别人不知道你是儿子一样————————————》儿子的数据{{msg}}</div>`
    }  

    //  这两个组件很简单 现在两个组件创建好了。那么我肯定想用他。比如说让他显示在 <body></body> 里面

/*
    //一样的，如果 直接在body里面这样用
    
          <body id="box" >
                <Son></Son>
                <Father></Father>
            </body> 
  
    // 以上这样是不行的，因为我们还需要一个根实例。至于为啥要根实例，这里我也还没有理解，它规定的是这样的吧。
  */
     var rootVue= new Vue ({
            el : '#box' ,    //  如果要把infor 显示在
            data: {
              infor : '我是根哈哈哈哈'
            },
            components: {
              Father,
              Son

            }
     })
  
    //所以我们就创建一个根实例、
 
    //如下
     //是不是发现和全局组件有什么不同

     //局部组件和全局组件的区别在于。局部组件需要注册才能使用，如何注册呢？用components属性
    //组件的使用就到这里，都很简单，很基础。现在我们再来说说子父组件