父组件和子组件、注册组件语法糖

最新推荐文章于 2023-01-10 18:41:49 发布

Eli-sun

最新推荐文章于 2023-01-10 18:41:49 发布

阅读量297

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106793924

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

父组件和子组件

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--<cpn1></cpn1>-->
  <cpn2></cpn2>
</div>

<script src="../../vue.min.js"></script>
<script>
  // 1.创建第一个组件构造器(子组件)
  const cpnC1=Vue.extend({
    template:`
    <div>
      <h2>我是标题1</h2>
      <p>我是内容哈哈哈</p>
    </div>
    `
  })

  // 2.创建第二个组件构造器(父组件)
  const cpnC2=Vue.extend({
    template:`
    <div>
      <h2>我是标题2</h2>
      <p>我是内容呵呵呵</p>
      <cpn1></cpn1>
    </div>
    `,
    components:{
      cpn1:cpnC1,
    }
  })

  //root组件
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      // cpn1:cpnC1,
      cpn2:cpnC2,
    }
  })
</script>
</body>
</html>

注册组件语法糖

在上面注册组件的方式，可能会有些繁琐
1.Vue为了简化这个过程，提供了注册的语法糖
2.主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<script src="../../vue.min.js"></script>
<script>
  //1.全局组件注册的语法糖
  //1.创建组件构造器
  // const cpn1=Vue.extend()
  //2.组件注册
  Vue.component('cpn1',{
    template:`
    <div>
      <h2>我是标题1</h2>
      <p>我是内容呵呵呵</p>
    </div>
    `,})


  //2.注册局部组件的语法糖
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      'cpn2':{
        template:`
    <div>
      <h1>我是标题2</h1>
      <p>我是内容呵呵呵</p>
    </div>
    `
      }
    }
  })
</script>
</body>
</html>

Eli-sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父组件和子组件、注册组件语法糖

父组件和子组件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
复制链接

扫一扫