Tracy 小笔记 Vue - 组件插槽_component vrcard-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48702807/article/details/115400160

组件

组件里的 data 必须是一个函数返回一个对象，而不是直接一个对象，是为了更好的复用
组件里正常也有 method 等属性

组件使用的三个步骤(最原始的办法)

创建组件构造器(后期都被合并了): 调用 Vue.extend() 方法
const myComponet = Vue.extend({template:'里面是 html code'});
html code 可以使用两种方式
- script 标签：不常用 <script type="text/x-template" id="cpn">中间是 html code </script>
- template 标签： <script type="text/x-template" id="cpn">中间是 html code </template>
注册全局组件调用 Vue.component() 方法，意味着可以在多个 Vue 的实例下使用
Vue.component('组件标签名称 my-cpn', myComponet);
合并步骤 1 和 2 写法： Vue.component('组件标签名称 my-cpn', { template:'#cpn' }});
注册局部组件：
在 vue 实例下或者父组件中填写 components:{my-cpn:myComponet}
使用组件在 Vue 实例的作用范围内使用组件
html code : <my-cpn></my-cpn>

插槽 slot

组件里留的一个自定义接口

普通 <slot></slot>
带默认值<slot> 默认html code </slot>
具名插槽 <slot name="header"> 默认html code </slot>
作用域插槽：父组件替换插槽的标签，但是内容由子组件提供
比如一个插槽的导航默认是横向导航，导航的数据是在子组件的 data 里，但是我们用这个组件的时候想要变成垂直导航

Demo: 利用插槽，更改样式：竖向改横向

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>组件，默认是竖向排列</h2>
    <cpn></cpn>
    <h2>利用插槽，横向排列，并显示不同颜色</h2>
    <cpn><template v-slot:tracy="slotProps">
        <p>{{ slotProps.aaa.join(" * ") }}</p>
        <p style="color:red">{{slotProps.bbb}}</p>
      </template></cpn>
  </div>
  <template id="cpnn">
    <div>
      <slot name="tracy" :aaa="movies" :bbb="p">
        <ul>
          <li v-for="item in movies">{{item}}</li>
        </ul>
        <p>{{p}}</p>
      </slot>
    </div>
  </template>
  <script>
  const vue = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: "#cpnn",
        data() {
          return {
            movies: ["首页", "期刊", "会议"],
            p: "显示不同颜色的文字"
          }
        }
      }
    }
  });
  </script>
</body>

</html>

模块化

模块化的核心：导出和导入
常见的模块化规范: CommonJS, AMD, CMD, 也有 ES6 的 Modules

简单了解 CommonJS 即可
CommonJS 的导出：在 moduleA.js 文件中写 module.exports = {flag = true, test(a){return a ++;}}
CommonJS 的导入： let {flag, test} require ('../moduleA.js');
上面的导入代码等同于： let temp = require ('moduleA'); let flag = temp.flag; let test = temp.test;