vue的父子组件写法 

<!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>

 

posted @ 2019-07-24 17:16  码哥之旅  阅读(1405)  评论(0)  编辑  收藏  举报