Vue组件

最新推荐文章于 2023-08-15 20:00:09 发布

宁妤

最新推荐文章于 2023-08-15 20:00:09 发布

阅读量259

点赞数

分类专栏：课后总结文章标签： vue

本文链接：https://blog.csdn.net/Zningsir/article/details/106108942

版权

课后总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件

组件式vue最强大的功能之一

可以扩展html元素，封装可以重用的代码

优点：

1.能减少代码的重用，提高开发效率
2.降低页面的耦合度，是页面更方便维护和管理

组件化的基本使用

在这里插入图片描述

局部组件和全局组件

在这里插入图片描述

父组件和子组件

在这里插入图片描述

组件的语法糖注册方式

在这里插入图片描述

组建模板的分离写法

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <!-- script标签 type的类型必须是text/x-template -->
  <!-- <script type="text/x-template" id="cpn1">
  <div>
    <h1>我是标题</h1>
    <p>我是内容</p>
  </div>
  </script> -->

  <!-- template标签 -->
  <template id="cpn1">
    <div>
      <h1>我是标题</h1>
      <p>我是内容hhh</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    //注册全局组件
    Vue.component('cpn',{
      template:"#cpn1"
    })
    const app = new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

组件中的数据存放问题

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <!-- script标签 type的类型必须是text/x-template -->
  <!-- <script type="text/x-template" id="cpn1">
  <div>
    <h1>我是标题</h1>
    <p>我是内容</p>
  </div>
  </script> -->

  <!-- template标签 -->
  <template id="cpn1">
    <div>
      <h1>{{title}}</h1>
      <p>我是内容hhh</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    //注册全局组件
    Vue.component('cpn',{
      template:"#cpn1",
      data(){
        return{
          title:'abd'
        }
      }
    })
    const app = new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

父组件给子组件传值案例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <father></father>
    <pr v-bind:txt="aq"></pr>
  </div>
  <script src="./vue.js"></script>
  <script>
    Vue.component('father',{
      template:`
        <div>
          <h1>我是父组件</h1>
          <child v-bind:txt="msg"></child>
        </div>
      `,
      data:function(){
        return{
          msg:'我是父组件中的数据，要传给子组件'
        }
      }
    })

    Vue.component('child',{
      // 传一个属性
      props:['txt'],
      template:`
        <div>
          <h1>我是子组件</h1>
          <p>{{txt}}</p>
        </div>
      `
    })
    Vue.component('pr',{
      props:['txt'],
      template:`
        <div>
          <h1>{{txt}}</h1>
        </div>
      `
    })

    new Vue({
      el:"#app",
      data:{
        aq:"hello vue"
      }
    })
  </script>
</body>
</html>