Vue-学习笔记-09 深入组件化开发与组件通信

文章目录一、什么是组件？二、Vue中的组件?三、注册组件的基本步骤3.1 知识储备3.2 第一种方式使用全局组件(coderwhy)3.3 第二种方式使用全局组件(MrLiuQuan)3.4 局部组件3.5 父组件和子组件一、什么是组件？在看组件之前，我们先来看这样一个问题，人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大

优雅哥cc

8349人浏览 · 2020-07-28 14:41:12

优雅哥cc · 2020-07-28 14:41:12 发布

一、什么是组件？

在看组件之前，我们先来看这样一个问题，人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
但是，我们人有一种天生的能力，就是将问题进行拆解。
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

在这里插入图片描述

二、Vue中的组件?

组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
在这里插入图片描述
组件化思想的应用：
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。
所以，组件是Vue开发中，非常重要的一个篇章。

三、注册组件的基本步骤

组件命名方式：短横线方式、驼峰方式

组件注册注意事项
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板种用驼峰的方式使用组件,但是在普通的标签模板种，必须使用短横线的方式使用组件。

3.1 知识储备

Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.2全局组件

<body>
  <div id='app'>
    <!-- 3. 使用组件 -->
    <my-cpn></my-cpn>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    // 1.创建组件构造器
    let cpnContructor = Vue.extend({
      template:`
        <div>
          <h2>我是标题</h2>
          <h2>我是内容，哈哈哈哈哈</h2>
          <h2>我是内容，呵呵呵呵呵呵</h2>
        </div>
      `
    })
      
    // 2.注册组件
    Vue.component("myCpn",cpnContructor);

    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
    })
  </script>
</body>

3.3 局部组件

<body>
  <div id='app'>
    <cpn></cpn>
  </div>

  <script src='../js/vue.js'></script>
  <script>
    // 1、创建组件构造器
    let cpnC = Vue.extend({
      template: `
        <div>
          <h2>我是标题</h2>
          <h2>我是内容，哈哈哈哈哈</h2>
          <h2>我是内容，呵呵呵呵呵呵</h2>
        </div>
      `
    })
    
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      // 注册局部组件
      components:{
        cpn:cpnC
      }
    })
  </script>
</body>

3.4 父组件和子组件

<body>
  <div id='app'>

    <!-- 如果没有单独注册则不能使用 -->
    <!-- <cpn1></cpn1> -->
    <cpn2></cpn2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    // 1、创建第一个组件构造器 (子组件)
    let cpnC1 = Vue.extend({
      template:`
        <div>
          <h2>我是标题1</h2>
          <h2>我是内容1，哈哈哈哈哈</h2>
        </div>
      `
    })

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


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

效果：
在这里插入图片描述

3.5 注册组件的语法糖

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

<body>
  <div id='app'>
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    // 语法糖方式注册全局组件
    Vue.component("cpn1",{
      template:`
        <div>
          <h2>我是标题1</h2>
          <h2>我是内容1，哈哈哈哈哈</h2>
        </div>
      `
    })

    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
      // 语法糖方式注册局部组件
      components:{
        "cpn2":{
          template:`
            <div>
              <h2>我是标题2</h2>
              <h2>我是内容2，哈哈哈哈哈</h2>
            </div>
          `
        }
      }
    })
  </script>
</body>

效果:
在这里插入图片描述

3.6 组件模板的抽离

有以下两种方式:

script标签，注意：类型必须是 text/x-template
template标签

这两种方式都必须给定一个id属性，以便template模板能够绑定到。

<body>
  <div id='app'>
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>
  
  <!-- 1、script标签，注意：类型必须是 text/x-template -->
  <script type="text/x-template" id="cpn1">
    <div>
      <h2>我是标题1</h2>
      <p>我是内容哈哈哈1</p>
    </div>
  </script>

  <!-- 2、template标签 -->
  <template id="cpn2">
    <div>
      <h2>我是标题2</h2>
      <p>我是内容哈哈哈2</p>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    // 1、全局script 
    Vue.component("cpn1",{
      // template:"#cpn1"
    })
    // 2、全局template
    Vue.component("cpn2",{
      // template:"#cpn2"
    })

    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
      //局部组件注册
      components:{
        "cpn1":{
          template:"#cpn1"
        },
        "cpn2":{
          template:"#cpn2"
        }
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

3.7 组件的data

首先我们需要知道，组件内部是不能访问我们实例的数据的。

那么组件自己的数据存放在哪里呢?
组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

<body>
  <div id='app'>
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>

  <!-- 1、script标签，注意：类型必须是 text/x-template -->
  <script type="text/x-template" id="cpn1">
    <div>
      <h2>我是标题1</h2>
      <p>我是内容哈哈哈1</p>
    </div>
  </script>

  <!-- 2、template标签 -->
  <template id="cpn2">
    <div>
      <h2>{{title}}</h2>
      <p>我是内容哈哈哈2</p>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    // 1、全局script 
    Vue.component("cpn1", {
      // template:"#cpn1"
    })
    // 2、全局template
    Vue.component("cpn2", {
      template: "#cpn2",
      data: function () {
        return {
          title:"这是标题newnewnew"
        }
      }
    })

    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        "cpn1": {
          template: "#cpn1"
        },
        // "cpn2":{
        //   template:"#cpn2"
        // }
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

3.8 组件的data必须是一个函数的原理

首先，如果不是一个函数，Vue直接就会报错。
其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

官方文档的解释：

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它组件

必须是一个函数的原理：
JS示例代码：

  <script>

    // 不影响 内存地址不一样
    function abc(){
      return{
        name:'why',
        age:18
      }
    }
    
    let obj1 = abc()
    let obj2 = abc()
    let obj3 = abc()

    obj1.name='test'

    console.log('obj1.name: ', obj1.name);
    console.log('obj2.name: ', obj2.name);
    console.log('obj3,name: ', obj3.name);


    // 相互影响 内存地址一样
    let obj = {
      name:"Mr",
      age:16
    }
    function test(){
      return obj
    }
    let test1 = test()
    let test2 = test()
    let test3 = test()

    test1.name='test'

    console.log('test1.name: ', test1.name);
    console.log('test2.name: ', test2.name);
    console.log('test3,name: ', test3.name);
  </script>

效果：
在这里插入图片描述

四、组件之间的通信

在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的。
但是，在开发中，往往一些数据确实需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到

通过props向子组件传递数据 props=>properties(属性)
通过事件向父组件发送消息。

在这里插入图片描述

4.1 父组件向子组件传递数据 props

<body>
  <div id='app'>
  	<!-- v-bind:需要传递给谁="传递的数据" -->
    <cpn :cmovies="movies" :cmsg="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <ul>
        <li v-for="item in cmovies">{{item}}</li>
      </ul>
      <h2>{{cmsg}}</h2>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    // 父传子 props
    let cpn = {
      template: "#cpn",

      // props: ['cmovies','cmsg'],
      props: {
        // 1、限制类型
        // cmovies: Array,
        // cmsg: String,

        // 2、匹配多个类型
        // cmovies: [String,Array],

        // 3、限制类型 默认值  是否必须
        cmsg:{
          type:String,
          default:"aaaaaaaaaa",
          required:true
        },
        // 4、类型是对象或者数组 默认值必须是一个函数
        cmovies:{
          type:Array,
          default:function (){
            return []
          },
          required:true
        }
      },
    }

    let vm = new Vue({
      el: '#app',
      data: {
        message: '测试文本',
        movies: ['海王', '海贼王', '海尔兄弟']
      },
      components: {
        "cpn": cpn
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

4.2 prop 验证

官网直达:prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

4.3 props驼峰的问题

如果我们组件内部使用的是驼峰命名方式的话，在组件传递值的时候需要把驼峰处切换成用 -线连接的方式。

<body>
  <div id='app'>
      <cpn :c-info="info" :child-my-message="message"></cpn>
  </div>
  
  <template id="cpn">
    <div>
      <h2>{{cInfo}}</h2>
      <h2>{{childMyMessage}}</h2>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    
    let cpn = {
      template:"#cpn",
      props:{
        cInfo:{
          type:Object,
          default:function (){
            return {}
          },
        },
        childMyMessage:{
          type:String,
          default:''
        }
      }
    }

    let vm = new Vue({
      el:'#app',
      data:{
        info:{
          name:"peng",
          age:18,
          height:1.75
        },
        message:"这是 message"
      },
      components:{
        "cpn":cpn
      }
    })
  </script>
</body>

4.4 自定义事件 $emit 子传父

子组件发射事件 > 父组件监听该事件 > 接收使用

props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：

在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

<body>
  <!-- 父组件模板 -->
  <div id='app'>
  	<!-- 这里在接收到子组件的值时，不需要显示传递，因为它可以隐士传递并且不会和event冲突，因为它没有浏览器的事件对象-->
    <cpn @item-click="cpnClick"></cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    //1、子组件
    let cpn = {
      template: "#cpn",
      data() {
        return {
          categories:[
            {id:"a",name:"热门推荐"},
            {id:"b",name:"手机数码"},
            {id:"c",name:"家用家电"},
            {id:"d",name:"电脑办公"},
          ]
        }
      },
      methods: {
        btnClick:function(item){
          // console.log(item);
          // 发射事件名称,传递的参数
          this.$emit('item-click',item)
        }
      },
    }

    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      methods: {
        cpnClick:function(item){
          console.log(item);
        }
      },
      components:{
        "cpn":cpn
      }
    })
  </script>
</body>

五、父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用 $c h i l d r e n 或$ refs reference(引用)
子组件访问父组件：使用$parent

5.1 父访问子 $children $refs

<body>
  <div id='app'>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref='aaa'></cpn>
    <button @click="btnClick">按钮</button>
  </div>
  
  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
      methods:{
        btnClick(){
          // 1、$children
          // console.log(this.$children);
          // this.$children[0].showMessage();//show
          // console.log(this.$children[0].name);//我是子组件的data

          // for(let item of this.$children){
          //   item.showMessage();
          //   console.log(item.name);
          // }


          // 2、$refs => 对象类型 默认是空对象 需要在我们的子组件上加 ref属性
          console.log(this.$refs.aaa.name);//我是子组件的data
        }
      },
      components:{
        cpn:{
          template:"#cpn",
          methods: {
            showMessage(){
              console.log("show");
            }
          },
          data() {
            return {
              name:"我是子组件的data"
            }
          },
        }
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

5.2 子访问父 $root $parent

<body>
  <div id='app'>
    <cpn></cpn>
  </div>
  
  <template id="cpn">
    <div>
      <h2>我是cpn组件</h2>
      <ccpn></ccpn>
    </div>
  </template>

  <template id="ccpn">
    <div>
      <h2>我是子子组件</h2>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
      components:{
        cpn:{
          template:"#cpn",
          data() {
            return {
              name:"我是cpn组件的name"
            }
          },
          components:{
            ccpn:{
              template:"#ccpn",
              methods: {
                btnClick(){
                  //1、访问父组件
                  console.log(this.$parent.name);//我是cpn组件的name
                  console.log(this.$root.message);//test
                }
              },
            }
          }
        },
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

六、slot 插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

例子：移动网站中的导航栏。
移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。

警告：本文所使用的插槽在Vue 2.6 以上已经废弃了！但还支持使用

6.1 插槽的基本使用

插槽的基本使用 <slot> </slot>
插槽的默认值 <slot>button</slot>
如果有多个值，同时放入到组件进行替换时，会一起作为替换元素

<body>
  <div id='app'>
    <cpn><span>有BUG发生</span></cpn>
    <cpn><span>有一个警告</span></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <strong>ERROR:</strong>
      <slot>默认内容</slot>
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        "cpn": {
          template: "#cpn",

        }
      }
    })
  </script>
</body>

效果:
在这里插入图片描述

6.2 具名插槽的使用

通过name属性给slot定义一个属性名，在使用该件时，可以根据该name找到对应插槽，替换该插槽的内容

6.2.1 (2.6.0)版本及以前的写法

<body>

  <div id='app'>
    <cpn>
      <p slot="header">标题信息</p>
      <p>主要内容</p>
      <p slot="footer">底部信息</p>
    </cpn>
    
    <br>
    
    <!-- 嵌套多个标签 -->
    <cpn>
      <template slot="header">
        <p>标题信息一</p>
        <p>标题信息二</p>
      </template>
      <p>主要内容</p>
      <template slot="footer">
        <p>尾部信息一</p>
        <p>尾部信息二</p>
      </template>
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot>主题内容</slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        "cpn": {
          template: "#cpn",

        }
      }
    })
  </script>
</body>

效果;
在这里插入图片描述

6.2.2 (2.6.0)之后的版本新增写法 v-slot（推荐）

v-slot 语法糖为 #
例如: v-slot:header 可以简写为 #header

基本使用:

<body>

  <div id='app'>
    <cpn>
      <!-- v-slot 有语法糖 v-slot:header 可以简写为 #header -->
      <template #header>
        <h1>Here might be a page title</h1>
      </template>

      <template v-slot:default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>

      <template #footer>
        <p>Here's some contact info</p>
      </template>
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        "cpn": {
          template: "#cpn",
        }
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

6.3 作用域插槽

父组件替换插槽的标签，但是内容由子组件来决定

子组件通过v-bind绑定一个属性值,属性值名是自定义的注意避免使用大写的name,因为mustache在此处解析时不认识大写。
父组件通过v-slot:组件名=“属性名”接收该值:

<div id='app'>
  <!-- 目的是拿到子组件里边的pLanguages -->
  <cpn>
    <!-- 此处的 #header 是 v-slot:header的语法糖 此处的 son 是自定义的 -->
    <template #header="son">
      <span>{{son.headerdata.join(" - ")}}</span>
    </template>
  </cpn>
</div>
 
<template id="cpn">
  <div>
    <header>
      我是header
      <!-- 此处的headerdata是自定义的 -->
      <slot name="header" :headerdata="pLanguages">
        我是header slot
      </slot>
    </header>
  </div>
</template>

6.3.1 作用域插槽 2.6.0 以前的写法

<body>
  <div id='app'>
    <cpn></cpn>
    <cpn>
      <!-- 目的是拿到子组件里边的pLanguages -->
      <template slot-scope="slot">
        <!-- 替换默认的内容 -->
        <!-- <span v-for="item in slot.mydata">{{item}}-</span> -->
        <span>{{slot.mydata.join('-')}}</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <ul>
        <slot :mydata="pLanguages">
          <!-- 默认的内容 -->
          <li v-for="item in pLanguages">{{item}}</li>
        </slot>
      </ul>
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              pLanguages: ['JavaScript', 'PHP', 'Java', 'TypeScript', 'C++', 'C#', 'Python', 'Go']
            }
          },
        }
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

6.3.2 作用域插槽 2.6.0之后的写法(推荐)

官方在2.6.0之后废弃了slot-scope ,请使用 v-slot

<body>
  <div id='app'>
    <!-- 目的是拿到子组件里边的pLanguages -->
    <cpn>
      <!-- 此处的 #header 是 v-slot:header的语法糖 此处的 son 是自定义的 -->
      <template #header="son">
        <span>{{son.headerdata.join(" - ")}}</span>
      </template>
      <template #footer="footer">
        <span>替换掉footer slot的内容</span>
        <!-- 此处的mustache 只支持小写(写小写可以匹配组件的大小写 写大写不匹配) -->
        <span>{{footer.copyright}}</span>
      </template>
    </cpn>
  </div>
  
  <template id="cpn">
    <div>
      <header>
        我是header
        <!-- 此处的headerdata也是自定义的 此处不建议使用大写，此处的mustache写法不支持大写-->
        <slot name="header" :headerdata="pLanguages">
          我是header slot
          <span v-for="item in pLanguages">{{item}}</span>
        </slot>
      </header>
      <main>
        我是main
        <slot>
          我是main slot
        </slot>
      </main>
      <footer>
        我是footer
        <slot name="footer" :copyRight="copyRight">
          我是footer slot
        </slot>
      </footer>
    </div>
  </template>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'test'
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              pLanguages: ['JavaScript', 'PHP', 'Java', 'TypeScript', 'C++', 'C#', 'Python', 'Go'],
              copyRight: "泸职院彭先生版权所有"
            }
          },
        }
      }
    })
  </script>
</body>

效果:
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^