vue的父子组件写法

最新推荐文章于 2023-04-02 13:38:22 发布

weixin_30437337

最新推荐文章于 2023-04-02 13:38:22 发布

阅读量232

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/asplover/p/11239412.html

版权

<!DOCTYPE html>
<html>
<head>
  <title>侦测器测试</title>
  <script src="js/vue.js" type="text/javascript"></script>
  <meta charset="utf-8">
</head>
<body>
  <div id="parentChild">
      <h1>{{subject}}</h1>
      <parent-name></parent-name>
  </div>
  <script type="text/javascript">
    var childNode={
      template:`
        <h4>childNode子组件信息</h4>
      `
    }
    var parentNode={
      //如下例子中<child-name></child-name>是来子组件childName转换
      //原因在于HTML大小写不敏感,为区别转换时用中划线"-"相加
      template:`
        <div>
          <h3>父组件信息(即本组件显示的信息parentNode)</h3>
          <child-name></child-name>
          <child-name></child-name>
          <child-name></child-name>
        </div>
      `,
      components:{
        'childName':childNode
      }      
    }
    var parentChild=new Vue({
      //目的是挂载到DOM上
      el:'#parentChild',
      //传递变量给{{subject}},目标是验证挂载是否成功
      data:{
        subject:'父子组件应用案例'
      },
      components:{
        //1)把定义组件赋值给变量名称为:'parentName',
        //2)此名称将在标签中调用方式为:<parent-name></paren-tname>
        //3)不以这样形式<parentName></parentName>，原因是HTML中的特性名是大小写不敏感的
        //都转换为小写
        'parentName':parentNode
      }
    })

  </script>
</body>
</html>

转载于:https://www.cnblogs.com/asplover/p/11239412.html

weixin_30437337

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的父子组件写法

<!DOCTYPE html><html><head> <title>侦测器测试</title> <script src="js/vue.js" type="text/javascript"></script> <meta charset="utf-8">&l...
复制链接

扫一扫