extend与component的区别

最新推荐文章于 2023-02-10 23:40:41 发布

G018_star sky♬

最新推荐文章于 2023-02-10 23:40:41 发布

阅读量268

点赞数 1

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

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

版权

vue.js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

使用component的案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="example">
        <my-component></my-component>
        {{message}}
    </div>
    <script crossorigin="anonymous" integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ==" src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>
    <script>
        Vue.component('my-component', {
            template: 
            '<div>A custom component!</div>'
        })
        var vm = new Vue({
            el: '#example',
            data:{
                message:'hello world'
            }
        })
    </script>
</body>

</html>

使用extend的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>案例2</title>
</head>
<body>

<div id="app1">
  <cpn></cpn>
</div>
<div id="app2">
  <cpn></cpn>
</div>
<cpn></cpn>

<script src="../js/vue.js"></script>
<script>
  const cpn = Vue.extend({
    template: `
    <div>
      <h2>我是标题</h2>
      <p>我是组件中的内容</p>
    </div>
    `
    })

  Vue.component('cpn', cpn)

  const app1 = new Vue({
    el: '#app1'
  })

  const app2 = new Vue({
	el: '#app2'
  })
</script>

</body>
</html>

slot插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08-组件slot的基本使用</title>
</head>
<body>

<div id="app">
  <cpn><button>我是button元素</button></cpn>
</div>

<template id="cpn">
  <div>
    <div>我是div元素</div>
    <slot>我是slot元素</slot>
    <h2>我是h2元素</h2>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = Vue.extend({
    template: '#cpn',
  })

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

</body>
</html>