java

Vue 插槽和自定义事件

rzk · 5月5日 · 2020年本文共2245个字 · 预计阅读8分钟98次已读

官方给出prop例子

  props: ['initialCounter'],
        data: function () {
    return {
      counter: this.initialCounter
    }
  }

####自定义事件
&睿共享#8211; 不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:

  ****this.$emit('myEvent')****

####自定义组件的 v-model
– 一个组件上的 ****v-model**** 默认会利用名为 ****valu睿共享e**** 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 ****value**** attribute 用于不同的目的。****model**** 选项可以用来避免这样的冲突:

    Vue.component('base-checkbox', {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      checked: Boolean
    },
    template: `
      <input
        type="checkbox"
        v-bind:checked="checked"
        v-on:change="$emit('change', $event.target.checked)"
      >
    `
  })
  • 现在在这个组件上使用 v-model 的时候:

  • 这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的 property 将会被更新。

插槽的使用

  <!--v-bind:rzk的意思是  {message遍历出来的值需要绑定到props里面  然后通过模板显示出来}-->
  <!--组件: 传递给组件中的值,  通过props 去接收-->
  <div id="app">
      <pig v-for="m in message" v-bind:rzk="m"></pig>
  </div>
  <!--导入vue-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  <script>
      Vue.component("pig",{
          props: ['rzk'],<!--接收绑定的值-->
          template: '<li>{{rzk}}</li>'<!--通过props接收到的值传给li里面-->
      });

      //通过new 睿共享Vue 可以声明全局变量,new返回的对象就是应用对象
      var vm = new Vue({
          el: "#app",
          data: {
              message: ["hello,vue!","Java","Mysql"]
          }
      });
  </script>

示例

  <!DOCTYPE html>
  <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <div id="app">
      <todo>
          <todo-title slot="todo-title" v-bind:title="title"></todo-title>
          <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
      </todo>
  </div>
  <!--导入vue-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  <script>
      //slot:插槽
      Vue.component("todo",{
          template:'<div>
                      <slot name="todo-title"></slot>
                      <ul>
                          <slot name="todo-items"></slot>
                      </ul>
                    </div>'
      });

      Vue.component("todo-title",{
          props: ['title'],
          template: '<div>{{title}}</div>'
      })

      Vue.component("todo-items",{
          props: ['item','index'],
          //模板
          template: '<li>{{index}} -- {{item}} <button @click="remove">删除</button></li>'睿共享,
          methods: {
          睿共享    remove: function (index) {
                  alert("进入")
                  this.$emit('remove',index);
              }
          }
      })

      var vm = new Vue({
          el: "#app",
          data: {
              title: "Rzk博客",
              todoItems: ['rzk','MySQL','Java']
          },
          methods: {
              removeItems: function (index) {
                  console.log("删除" + this.todoItems[index] + "OK");
                  this.todoItems.splice(index,1);//一次删除一个元素
              }
         }
      });
  </script>
  </body>
  </html>
0 条回应