区块链技术博客
www.b2bchain.cn

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

这篇文章主要介绍了Vue.js——父组件和子组件——2020.11.23的讲解,通过具体代码实例进行24028 讲解,并且分析了Vue.js——父组件和子组件——2020.11.23的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=24028

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

父组件和子组件

    • 一丶父组件和子组件
    • 二丶案例代码
    • 三丶运行结果
            • ——博观而约取,厚积而薄发——

一丶父组件和子组件

  • 在前面我们看到组件树:
    • 组件和组件之间存在层级关系
    • 而其中一种非常重要的关系就是父子组件的关系
  • 父子组件错误用法:以子标签的形式在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> 

三丶运行结果

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

——博观而约取,厚积而薄发——

本文转自互联网,侵权联系删除Vue.js——父组件和子组件——2020.11.23

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Vue.js——父组件和子组件——2020.11.23
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们