Vue.extend()与Vue.component

最新推荐文章于 2022-08-10 20:53:35 发布

G018_star sky♬

最新推荐文章于 2022-08-10 20:53:35 发布

阅读量86

点赞数 1

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42526440/article/details/114698957

版权

vue.js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

Vue.compont是Vue.extend()的语法糖


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-父子组件的关系</title>
</head>
<body>

<div id="app">
  <cpn2></cpn2>
  <!--错误用法-->
  <cpn1></cpn1>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.注册一个子组件
  const cpn1 = Vue.extend({
    template: `
      <div>
        <h2>我是cpn1的标题</h2>
        <p>我是cpn1的内容,哈哈哈</p>
      </div>
    `
  })

  // 2.注册一个父组件
  const cpn2 = Vue.extend({
	  template: `
      <div>
        <h2>我是cpn2的标题</h2>
        <p>我是cpn2的内容,哈哈哈</p>
        <cpn1></cpn1>
      </div>
    `,
    components: {
	  	'cpn1': cpn1
    }
  })

  const app = new Vue({
    el: '#app',
    components: {
    	'cpn2': cpn2
    }
  })
</script>

</body>
</html>

Vue.component

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-注册组件的语法糖</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
	/**
   * 1.注册全局组件的语法糖
	 */
  Vue.component('cpn', {
	  template: `
      <div>
        <h2>我是cpn1的标题</h2>
        <p>我是cpn1的内容,哈哈哈</p>
      </div>
    `
  })

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

</body>
</html>

G018_star sky♬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.extend()与Vue.component

Vue.compont是Vue.extend()的语法糖<html lang="en"><head> <meta charset="UTF-8"> <title>05-父子组件的关系</title></head><body><div id="app"><div><h2>我是cpn2的标题</h2> <p>我是cpn2的内容,哈哈哈</
复制链接

扫一扫