vue复习大法之组件化思想（四）

初次体验组件化思想

注册组件的步骤

注册步骤解析

上代码

<div id="app">
    <my-cpn></my-cpn>
  </div>
  <script src="../js/vue.js"></script>
  <script>
     /* 调用Vue.extend()创建的是一个组件构建起
     通常在创建组件构造器时，传入template代表我们自定义组件的模板
     该模板就是在使用到组件的地方，要显示HTML代码
     Vue的文档几乎看不到，之后是使用语法糖 */
     /* 
     Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的名字
     需要传递两个参数：注册组件的标签名称；组件构造器
      */
      /* 
        组件必须挂载到实例上面

       */
    const cpn = Vue.extend({
      template: `
        <div>
          <h2>我是标题</h2>
        </div>
      `
    });
    Vue.component('my-cpn', cpn);
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word"
      },
      methods: {}
    })
  </script>

全局组件和局部组件

父组件和子组件

注册组件-语法糖

模板组件的分离写法

组件数据的存放

 <script>
    function obj() {
      return {
        name: "jack"
      }
    }
    let o1 = obj();
    let o2 = obj();
    let o3 = obj();
    o1.name = "Roise";
    console.log(o1)
    console.log(o2)
    console.log(o3)
  </script>

具体使用小案例

  <div id="app">
    <temp></temp>
    <temp></temp>
  </div>
  <template id="temp1">
    <div>
      <p>{{title}}</p>
      <p>{{cout}}</p>
      <button @click="increat">+</button>
      <button @click="upcreat">-</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>

    Vue.component('temp', {
      template: "#temp1",
      data() {
        return {
          title: "我是标题",
          cout: 0
        }
      }, methods: {
        increat() {
          this.cout++;
        }, upcreat() {
          this.cout--;
        }
      },
    })
    let app = new Vue({
      el: "#app",
    })
  </script>

父子组件的通信

正常情况子组件不能引用父组件或者Vue实例的数据，但是在实际开发中，往往一些数据缺失需要从上层传递到下层，比如我们从服务器请求到了很多的数据，其中一部分数据展示总体界面的吗，一些数据展示小组件中的数据，并不会重新发送请求，而是让大组件将数据传给小组件

props用法

Vue实例和子组件的通信和父组件和子组件的通信过程是一样的

<div id="app">
    <cpn :cmessage="message" :cmovies="movies"></cpn>
  </div>
  <template id="temp">
    <div>
      <p>{{cmessage}}</p>
      <p>{{cmovies}}</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const cpn = {
      template: "#temp",
      // props: ['cmessage', 'cmovies'],
      // props:{
      //   cmessage:String,
      //   cmovies:Array
      // },
      props: {
        cmessage: {
          type: String,
          default: '默认值',
          required: true
        },
        cmovies: {
          type: Array,
          // default:[],// vue2.5.17 以下不会报错，否则会报错
          // 类型是对象或者数据时，默认值必须是一个函数
          default(){
            return[]
          }
        }
      },
      data() {
        return {}
      }
    }
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word",
        movies: ['姜子牙', '哪吒', '大闹天宫', '虞姬传']
      },
      components: {
        cpn
      },
      methods: {}
    })
  </script>

数据验证

组件中使用驼峰命名

  <div id="app">
    <!-- 目前版本来说 是不支持驼峰命名 -->
    <temp :cmessage="message" :cmovies="movies" :cinfor="infor"></temp>
    <!-- cInfor   c-infor -->
    <temp :cmessage="message" :cmovies="movies" :chile-arr="chileArr"></temp>
  </div>
  <template id="temp1">
    <div>
      <p>{{cmessage}}</p>
      <p>{{cmovies}}</p>
      <p>{{cinfor}}</p>
      <p>{{chileArr}}</p>
    </div>
  </template>

// 部分代码
 props: {
        chileArr: {
          type: String,
          default: "123"
        }
      },

子级向父级传值

代码分析

  <div id="app">
    <temp @btnclick="btn"></temp>
  </div>
  <template id="temp">
    <div>
      <button v-for="item in categories" @click="btnClikc(item)">
        {{item.name}}
      </button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const temp = {
      template: "#temp",
      props: {

      },
      data() {
        return {
          categories: [
            { id: "1", name: "热门推荐" },
            { id: "2", name: "今日热点" },
            { id: "3", name: "现时抢购" },
            { id: "4", name: "国际品牌" }
          ]
        }
      },
      methods: {
        btnClikc(item) {
          // 发射事件 
          this.$emit("btnclick",item.name)
        }
      },
    }
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word"
      },
      components: {
        temp
      },
      methods: {
        // 处理发射事件函数接收收据
        btn(item) {
          console.log(item);
        }
      }
    })
  </script>

组件化访问-父子相传数据

父访问子

 <div id="app">
    <temp :c-message="message"></temp>
    <temp :c-message="message"></temp>
    <temp :c-message="message"></temp>
    <temp :c-message="message" ref="aaa"></temp>
    <button @click="btnClick">按钮</button>
  </div>
  <template id="temp">
    <div>
      <p>{{cMessage}}</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const temp = {
      template: "#temp",
      props: {
        cMessage: {
          type: String,
          default: "默认字符串",
          required: true
        }
      },
      data() {
        return {
          name: "张三"
        }
      },
      methods: {
        showMessage() {
          console.log("showMessage");
        }
      },
    }
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word"
      },
      components: {
        temp
      },
      methods: {
        btnClick() {
          console.log(this.$refs.aaa.name);
          this.$children[0].showMessage();
        }
      }
    })
  </script>

子访问父

  <div id="app">
    <temp :c-message="message"></temp>
  </div>
  <template id="temp">
    <div>
      <p>我是temp组件</p>
      <cpn></cpn>
    </div>
  </template>
  <template id="cpn">
    <div>
      <p>我是cpn组件</p>
      <button @click="btnClick">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word"
      },
      components: {
        temp: {
          template: "#temp",
          data() {
            return {
              name: "我是temp"
            }
          },
          components: {
            cpn: {
              template: "#cpn",
              methods: {
                btnClick() {
                  console.log(this.$parent.name);
                  console.log(this.$parent);
                  console.log(this.$root.message)
                }
              },
            }
          }
        }
      },
      methods: {}
    })
  </script>

父子组件访问

插槽 slot

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

  <div id="app">
    <temp :c-message="message">
      <p>我是插槽</p>
    </temp>
    <temp :c-message="message">
    </temp>
    <temp :c-message="message">
    </temp>
    <temp :c-message="message">
      <p>我是插槽</p>
      <button>按钮</button>
    </temp>
  </div>
  <template id="temp">
    <div>
      <p>{{cMessage}}</p>
      <slot><p>我是默认值插槽</p></slot>
    </div>
  </template>

slot基本使用

具名插槽

  <div id="app">
    <temp>
      <p slot="left">我是左边返回</p>
    </temp>
    <temp>
      <p slot="center">我是中间标题</p>
    </temp>
  </div>
  <template id="temp">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
    </div>
  </template>

编辑作用域

父组件模板的所有东西都会在父级作用域内编译；子级组件模板的所有东西都会在子级作用域内编译

 <div id="app">
    <temp v-show="isShow"></temp>
  </div>
  <template id="temp">
    <div>
      <p v-show="isShow">显示文字</p>
      <p>{{cMessage}}</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const temp = {
      template: "#temp",
      data() {
        return {
          isShow: false
        }
      }
    }
    let app = new Vue({
      el: "#app",
      data: {
        message: "Hello Word",
        isShow: true
      },
      components: {
        temp
      },
      methods: {}
    })
  </script>

作用域插槽的使用

  <div id="app">
    <cpm>
      <template slot-scope="slot">
        <span>{{slot.data}}</span>
      </template>
    </cpm>
  </div>
  <template id="cpm">
    <div>
      <slot :data="smessage">
        <ul>
          <li v-for="(item,index) in smessage" :key="index">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script src="./js/node_modules/vue/dist/vue.min.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          lsit: [{
            name: "张三"
          },
          {
            name: "李四"
          },
          {
            name: "王五"
          },
          {
            name: "赵六"
          },
          ]
        }
      },
      components: {
        cpm: {
          template:"#cpm",
          data() {
            return {
              smessage: ['123', '456', 'sadfsadf', 'dgfhgh']
            }
          },
        }
      }
    })
  </script>