Vue 三级组件嵌套工作中常有的嵌套

最新推荐文章于 2024-06-18 22:34:12 发布

晴雨恋

最新推荐文章于 2024-06-18 22:34:12 发布

阅读量929

点赞数

分类专栏： Vue 三级组件嵌套文章标签： Vue 三级组件嵌套

本文链接：https://blog.csdn.net/weixin_45441561/article/details/103047756

版权

本文探讨了在Vue.js开发中常见的三级组件嵌套情况，深入解析如何有效地管理和组织复杂的组件结构，以实现高效且可维护的前端应用。

摘要由CSDN通过智能技术生成

Vue 三级组件嵌套

组件的创建   私有的组件
        1、创建对象====data+template
        2、实例对象中挂载组件   components:{组件的名称：要显示的组件对象}
        3、将组件的名称以标签的形式写在结构中
app是一级组件，里面的内容div是子组件2级组件，先创建2级组件，通过一级组件的components挂载上去，标签写到一级父组件的模板里，创建三级组件，通过二级组件的components挂载上去，标签写到二级组件的模板里,注意三级要写到二级的上面

父向子组件传 三级组件嵌套，工作中常有的嵌套，简单的小例子
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
    <div id='app' class="root">
        {
  {msg}}
<!-- 二级组件以标签的方式写在一级父组件中 -->
        <second></second>