Vue学习系列(二)——组件详解_蓝瞳_前端开发者

前言

前言

上一篇初识vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性。而这一篇呢,将对Vue视图组件的核心概念进行详细说明。

上一篇

什么是组件呢?

组件可以扩展html元素,封装可重用的html代码,我们可以将组件看作自定义的html元素。

为什么要用到组件呢?

为了可重用性高,减少重复性开发,让我们可以使用独立可复用的小组件来构建大型应用。

 

基本

基本

一、组件注册

一、组件注册

1.通过Vue.extend()创建,然后由component来注册

1.通过Vue.extend()创建,然后由component来注册1.通过Vue.extend()创建,然后由component来注册

//  extend 创建组件
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

// component注册 组件
Vue.component('my-component', MyComponent);//使用到了 extend 创建的组件
var vm = new Vue({
  el: '#app',
  data: {
       
  }
})
//  extend 创建组件
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

// component注册 组件
Vue.component('my-component', MyComponent);//使用到了 extend 创建的组件
var vm = new Vue({
  el: '#app',
  data: {
       
  }
})

// extend 创建组件var Vue.extend({
template:
<div>A custom component!</div>
});

// component注册 组件my-component//使用到了 extend 创建的组件varnew Vue({
el:
#app,
data: {

}
})

说明

说明

  • 1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器。 
  • 2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的html。 
  • 3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。 
  • 4. 组件应该挂载到某个Vue实例下,否则它不会生效。
  • 1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器。 
  • 2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。 
  • 3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。 
  • 4. 组件应该挂载到某个Vue实例下,否则它不会生效。
  • extend 是构造创建一个组件的语法器,你给它参数 他给你创建一个组件, 然后这个组件,你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用组件

    var demo= Vue.extend({ 
    …. 
    }) 
    Vue.component(‘demo’,demo)



     可见上边的定义过程比较繁琐,也可以不用每次都调用两个,可以直接用 Vue.component 创建 ,也可以取组件 例如下

    var demo= Vue.component(‘demo’)

    2.全局注册

    2.全局注册2.全局注册

    如果我们定义了多个 vue实例,我们都可以使用这一个组件

    vue实例,我们都可以使用这一个组件

    <div id="app">
        <my-component></my-component>
    </div>
    <script>
    
    //注意要在vue实例之前去定义,不然渲染页面的时候,会报错
      // 定义一个名为 myComponent 的新组件
     Vue.component(' myComponent ', {
         template: `
                 <div id=" my-component ">
                     <p>2018 <a href="#">艾三元</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
                     <p>
                         <a href="#">京ICP备00000000号</a>
                     </p>
                 </div>
                 `,
         data () {
             return {
                 message: 'hello world'
             }
         }
     })
    
      var app = new Vue({
        el: '#app',//没错,vue实例所定义的DOM元素就是这个,超过了这个区域,定义的组件会无效
        data: {
        },
      })
    </script>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
    
    //注意要在vue实例之前去定义,不然渲染页面的时候,会报错
      // 定义一个名为 myComponent 的新组件
     Vue.component(' myComponent ', {
         template: `
                 <div id=" my-component ">
                     <p>2018 <a href="#">艾三元</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>
                     <p>
                         <a href="#">京ICP备00000000号</a>
                     </p>
                 </div>
                 `,
         data () {
             return {
                 message: 'hello world'
             }
         }
     })
    
      var app = new Vue({
        el: '#app',//没错,vue实例所定义的DOM元素就是这个,超过了这个区域,定义的组件会无效
        data: {
        },
      })
    </script>

    app//注意要在vue实例之前去定义,不然渲染页面的时候,会报错
    // 定义一个名为 myComponent 的新组件 myComponent , {
    template: `
    my-component 2018##font-weight: bold#
    `,
    data () {
    return {
    message:
    hello world
    }
    }
    })

    varnew Vue({
    el:
    #app//没错,vue实例所定义的DOM元素就是这个,超过了这个区域,定义的组件会无效 data: {
    },
    })

    3.局部注册

    3.局部注册3.局部注册

    表示只有在当前页面的app元素内使用

    app元素内使用

    var app = new Vue({
        el: '#app',
        data: {
        },
        components: {
              'my-component': {//这个就是我们局部组件的名字 在页面内使用 <my-component></my-component>
             template: `
                 <ul class ="contact-list non-style-list">
                  <li>
                     <b class ="component">组件</b>: <a href="#">@艾三元</a>
                  </li>
                  </ul>`,
          data () {
              return {
                  message: 'hello world'
              }
          },
          directives:{//自定义局部指令,使用的时候,直接可以 <my-component v-focus><my-component>
            focus;{
              inserted(el){
                el.focus();
              }
            }
          }
          }
        }
      })
    var app = new Vue({
        el: '#app',
        data: {
        },
        components: {
              'my-component': {//这个就是我们局部组件的名字 在页面内使用 <my-component></my-component>
             template: `
                 <ul class ="contact-list non-style-list">
                  <li>
                     <b class ="component">组件</b>: <a href="#">@艾三元</a>
                  </li>
                  </ul>`,
          data () {
              return {
                  message: 'hello world'
              }
          },
          directives:{//自定义局部指令,使用的时候,直接可以 <my-component v-focus><my-component>
            focus;{
              inserted(el){
                el.focus();
              }
            }
          }
          }
        }
      })

    varnew Vue({
    el:
    #app,
    data: {
    },
    components: {
    my-component//这个就是我们局部组件的名字 在页面内使用 <my-component></my-component> template: `
    classcontact-list non-style-listclasscomponent#`,
          data () {
              
    return {
                  message:
    hello world
              }
          },
          directives:{
    //自定义局部指令,使用的时候,直接可以 <my-component v-focus><my-component>        focus;{
              inserted(el){
                el.focus();
              }
            }
          }
    }
    }
    })

    注意:全局的组件是 component,而 局部的是 components

    注意

    属性

    属性

        定义了这个组件有哪些可配置的属性,组件的核心功能也是由它确定。props最好用对象写法,这样可以针对属性设置类型,默认值或自定义校验属性的值。

     <script>
    export default {
      name: "PropsDemo",
      props: {
        name: String,
        type: {
          validator: function(value) {
            //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告
            return ["success", "warning", "danger"].includes(value);
          }
        },
        list: {
          type: Array,
          // 对象或数组默认值必须从一个工厂函数获取
          default: () => []
        },
        isVisible: {
          type: Boolean,
          default: false
        },
        onChange: {
          type: Function,
          default: () => {}
        }
      },
      methods: {
        handleClick() {
          // 不要这么做、不要这么做、不要这么做
          // this.type = "warning";
    
          // 可以,还可以更好
          this.onChange(this.type === "success" ? "warning" : "success");
        }
      }
    };
    </script>  
    
    
    //用法
    <props name='Hello World' //原生属性
               :type='type'  
               :is-visible="false"
               :on-change="handlePropChange"
               :list=[22,33,44]
               title="Demo"  //原生属性
               class="test1"   //原生属性
               :class="['test2']"
               :style="{ marginTop: '15px' }" //注意:style 的优先级是要高于 style
               style="margin-top: 10px">
     <script>
    export default {
      name: "PropsDemo",
      props: {
        name: String,
        type: {
          validator: function(value) {
            //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告
            return ["success", "warning", "danger"].includes(value);
          }
        },
        list: {
          type: Array,
          // 对象或数组默认值必须从一个工厂函数获取
          default: () => []
        },
        isVisible: {
          type: Boolean,
          default: false
        },
        onChange: {
          type: Function,
          default: () => {}
        }
      },
      methods: {
        handleClick() {
          // 不要这么做、不要这么做、不要这么做
          // this.type = "warning";
    
          // 可以,还可以更好
          this.onChange(this.type === "success" ? "warning" : "success");
        }
      }
    };
    </script>  
    
    
    //用法
    <props name='Hello World' //原生属性
               :type='type'  
               :is-visible="false"
               :on-change="handlePropChange"
               :list=[22,33,44]
               title="Demo"  //原生属性
               class="test1"   //原生属性
               :class="['test2']"
               :style="{ marginTop: '15px' }" //注意:style 的优先级是要高于 style
               style="margin-top: 10px">


    export
    default {
    name:
    PropsDemo,
    props: {
    name: String,
    type: {
    validator: function(value) {
    //从父级传入的 type,它的值必须是指定的 ‘success’, ‘warning’, ‘danger’中的一个,如果传入这三个以外的值,都会抛出一条警告returnsuccesswarningdanger].includes(value);
    }
    },
    list: {
    type: Array,
    // 对象或数组默认值必须从一个工厂函数获取default []
    },
    isVisible: {
    type: Boolean,
    defaultfalse
    },
    onChange: {
    type: Function,
    default {}
    }
    },
    methods: {
    handleClick() {
    // 不要这么做、不要这么做、不要这么做
    // this.type = “warning”;

    // 可以,还可以更好thisthissuccesswarningsuccess);
    }
    }
    };
    //用法Hello World//原生属性type
    :
    isfalse
    :on
    handlePropChange
    :list
    223344]
    title
    Demo//原生属性classtest1//原生属性class[‘test2’]
    :style
    { marginTop: ’15px’ }//注意:style 的优先级是要高于 stylemargin-top: 10px

    通讯

    通讯

    艾三元

    艾三元

    一、父子通讯

    一、父子通讯一、父子通讯

    1.父向子传值

    1.父向子传值1.父向子传值

    语法:在父组件中使用子组件时候,通过以下方式传递数据

    <child-component v-bind:子组件prop=“父组件数据属性”></child-component>

    <child-component v-bind:子组件prop=“父组件数据属性”></child-component>child-component v-bind:子组件prop=“父组件数据属性”></child-component>v-bind:子组件prop=“父组件数据属性”></child-component>prop=“父组件数据属性”></child-component>“父组件数据属性”></child-component></child-component>child-component>

    //定义一个组件,并在vue实例中定义了data选项
    
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'keepfool',
            age: 28
        },
        components: {
            'my-component': {
                template: '#myComponent',
                props: ['myName', 'myAge']
            }
        }
    })
    
    定义一个组件
    Vue.component('my-component', {
         template: `
                 <div id="myComponent">
                  <table>
                    <tr>
                      <th colspan="2">
                      子组件数据
                      </th>
                   </tr>
                <tr>
                    <td>my name</td>
                    <td>{{ myName }}</td>
               </tr>
               <tr>
                <td>my age</td>
                <td>{{ myAge }}</td>
               </tr>
         </table>
         </div>`,
         props: ['foo'],//这里根据组件的props属性,来被动接受组件传递来的参数
         data () {
             return {
                 message: 'hello world'
             }
         }
     })
    
    //将父组件数据通过已定义好的props属性传递给子组件:
    <div id="app">
        <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
    </div>
    //定义一个组件,并在vue实例中定义了data选项
    
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'keepfool',
            age: 28
        },
        components: {
            'my-component': {
                template: '#myComponent',
                props: ['myName', 'myAge']
            }
        }
    })
    
    定义一个组件
    Vue.component('my-component', {
         template: `
                 <div id="myComponent">
                  <table>
                    <tr>
                      <th colspan="2">
                      子组件数据
                      </th>
                   </tr>
                <tr>
                    <td>my name</td>
                    <td>{{ myName }}</td>
               </tr>
               <tr>
                <td>my age</td>
                <td>{{ myAge }}</td>
               </tr>
         </table>
         </div>`,
         props: ['foo'],//这里根据组件的props属性,来被动接受组件传递来的参数
         data () {
             return {
                 message: 'hello world'
             }
         }
     })
    
    //将父组件数据通过已定义好的props属性传递给子组件:
    <div id="app">
        <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
    </div>

    //定义一个组件,并在vue实例中定义了data选项varnew Vue({
    el:
    #app,
    data: {
    name:
    keepfool,
    age:
    28
    },
    components: {
    my-component: {
    template:
    #myComponent,
    props: [
    myNamemyAge]
    }
    }
    })

    定义一个组件
    Vue.component(my-component, {
    template: `
    myComponent2
    子组件数据
    `,
    props: [
    foo//这里根据组件的props属性,来被动接受组件传递来的参数 data () {
    return {
    message:
    hello world
    }
    }
    })

    //将父组件数据通过已定义好的props属性传递给子组件:appnameage

    注意:在子组件中定义prop时,使用了camelCase命名法。由于HTML特性不区分大小写,浏览器会把所有大写字符解释为小写字符,所以camelCase的prop用于特性时,需要转为 kebab-case(短横线分割命名)。例如,在prop中定义的myName,在用作特性时需要转换为my-name。

    注意:

     2.子向父传值:自定义事件

     2.子向父传值2.子向父传值

    1) v-on绑定自定义事件:

    每个 Vue 实例都实现了事件接口,即:$on(eventName) 监听事件 和  $emit(eventName) 触发事件

     在父组件中:

    <my-component  v-on:child-say="listenToMyBoy"></my-component> //3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法
    <p>Do you like me? {{childWords}}</p>
     methods: {
                listenToMyBoy: function (somedata){  //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作
                  this.childWords = somedata
                }
            }
    <my-component  v-on:child-say="listenToMyBoy"></my-component> //3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法
    <p>Do you like me? {{childWords}}</p>
     methods: {
                listenToMyBoy: function (somedata){  //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作
                  this.childWords = somedata
                }
            }

    listenToMyBoy//3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法
    methods: {
    listenToMyBoy: function (somedata){
    //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作this somedata
    }
    }

    在子组件my-component中

    <button v-on:click="onClickMe">like!</button>  ////1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法
    
    methods: {
          onClickMe: function(){
            this.$emit('child-say',this.somedata);  //2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say
          }
        }
    <button v-on:click="onClickMe">like!</button>  ////1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法
    
    methods: {
          onClickMe: function(){
            this.$emit('child-say',this.somedata);  //2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say
          }
        }

    onClickMe////1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法
    methods: {
    onClickMe: function(){
    thischild-saythis//2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say }
    }

     通过子组件注册触发事件,父组件注册 触发子组件事件后的方法,传递参数,父组件通过监听子组件的事件,获取参数,执行响应的变化操作

    完整示列

    完整示列

    <my-component  v-on:child-say="listenToMyBoy"></my-component> //3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法
    <p>Do you like me? {{childWords}}</p>
    
    Vue.component('my-component', {
      template: '<button v-on:click="onClickMe">like!</button>',   //1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法
      methods:{
          onClickMe: function(){
            this.$emit('child-say',this.somedata);  //2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say
          }
      }
    })
    
    var vm = new Vue({
      el: '#app',
      data: {
           childWords:''
      },
      methods:{
        listenToMyBoy: function (somedata){  //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作
                  this.childWords = somedata
        }
      }
    })
    <my-component  v-on:child-say="listenToMyBoy"></my-component> //3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法
    <p>Do you like me? {{childWords}}</p>
    
    Vue.component('my-component', {
      template: '<button v-on:click="onClickMe">like!</button>',   //1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法
      methods:{
          onClickMe: function(){
            this.$emit('child-say',this.somedata);  //2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say
          }
      }
    })
    
    var vm = new Vue({
      el: '#app',
      data: {
           childWords:''
      },
      methods:{
        listenToMyBoy: function (somedata){  //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作
                  this.childWords = somedata
        }
      }
    })

    listenToMyBoy//3、父组件通过监听,来获取到这个广播信号 child-say ,然后触发 listenToMyBoy 方法

    Vue.component(my-component, {
    template:
    <button v-on:click=”onClickMe”>like!</button>//1、子组件内,有一个click,当点击的时候 触发 onClickMe 方法 methods:{
    onClickMe: function(){
    thischild-saythis//2、方法被触发以后,向父组件 发送一个信号广播,并传递参数 somedata,名字就是 child-say }
    }
    })

    varnew Vue({
    el:
    #app,
    data: {
    childWords:

    },
    methods:{
    listenToMyBoy: function (somedata){
    //4、incrementTotal 被触发,获取到参数 counter 值,执行相应的操作this somedata
    }
    }
    })

    插槽

    插槽

     

    Vue中的插槽,是组件的一块模板,由使用父组件提供。简单的说,就是子组件暴露一个让父组件传入自定义内容的接口,这样可以让使用者更好的拓展组件,进行更丰富的复用和定制化组件。

    插槽Slot的三大分类:默认插槽、具名插槽和作用域插槽

    1.默认插槽:直接在子组件的标签内写入内容即可

    1.默认插槽:1.默认插槽

    //父组件
    <template>
        <div class="father">
            <h3>灰色背景这是父组件</h3>
            <child>
                <div class="tmpl">
                  <span>1</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                </div>
            </child>
        </div>
    </template>
    //子组件
    <template>
        <div class="child">
            <h3>蓝色背景这是子组件</h3>
            <slot></slot>
        </div>
    </template>
    //父组件
    <template>
        <div class="father">
            <h3>灰色背景这是父组件</h3>
            <child>
                <div class="tmpl">
                  <span>1</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                </div>
            </child>
        </div>
    </template>
    //子组件
    <template>
        <div class="child">
            <h3>蓝色背景这是子组件</h3>
            <slot></slot>
        </div>
    </template>

    //父组件classfatherclasstmpl1234//子组件classchild

     

     2.具名插槽: 用name属性来表示插槽的名字,不传为默认插槽

     2.具名插槽2.具名插槽name

    //父组件
    <template>
      <div class="father">
        <h3>灰色背景这是父组件</h3>
        <child>
          <div slot="header">
            <span>页头1</span>
            <span>页头2</span>
            <span>页头3</span>
          </div>
          <div>   //一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
            <span>内容1</span>
            <span>内容2</span>
            <span>内容3</span>
          </div>
          <div slot="footer">    
            <span>页脚1</span>
            <span>页脚2</span>
            <span>页脚3</span>
          </div>
        </child>
      </div>
    </template>
    //子组件
    <template>
      <div class="child">
        // 具名插槽
        <slot name="header"></slot>
        <h3>蓝色背景这是子组件</h3>
        // 具名插槽
        <slot></slot>  //一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
        // 匿名插槽
        <slot name="footer"></slot>
      </div>
    </template>
    //父组件
    <template>
      <div class="father">
        <h3>灰色背景这是父组件</h3>
        <child>
          <div slot="header">
            <span>页头1</span>
            <span>页头2</span>
            <span>页头3</span>
          </div>
          <div>   //一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
            <span>内容1</span>
            <span>内容2</span>
            <span>内容3</span>
          </div>
          <div slot="footer">    
            <span>页脚1</span>
            <span>页脚2</span>
            <span>页脚3</span>
          </div>
        </child>
      </div>
    </template>
    //子组件
    <template>
      <div class="child">
        // 具名插槽
        <slot name="header"></slot>
        <h3>蓝色背景这是子组件</h3>
        // 具名插槽
        <slot></slot>  //一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
        // 匿名插槽
        <slot name="footer"></slot>
      </div>
    </template>

    //父组件classfatherheader//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。footer//子组件classchild// 具名插槽header// 具名插槽//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
    // 匿名插槽footer

     3.作用域插槽: 在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件slot-scope接受的对象上

     3.作用域插槽3.作用域插槽

    //父组件
    <template>
      <div class="father">
        <h3>灰色背景这是父组件</h3>
        <child>
          <template slot-scope="number">
            <div>
              <span v-for="item in number.data">{{item}}</span>
            </div>
          </template>
    
        </child>
    
        <child>
          这就是模板
        </child>
      </div>
    </template>
    
    //子组件
    <template>
      <div class="child">
    
        <h3>蓝色背景这是子组件</h3>
        // 作用域插槽
        <slot  :data="data"></slot>
      </div>
    </template>
    
     export default {
        data: function(){
          return {
            data: ['one','two','three']
          }
        }
    }
    //父组件
    <template>
      <div class="father">
        <h3>灰色背景这是父组件</h3>
        <child>
          <template slot-scope="number">
            <div>
              <span v-for="item in number.data">{{item}}</span>
            </div>
          </template>
    
        </child>
    
        <child>
          这就是模板
        </child>
      </div>
    </template>
    
    //子组件
    <template>
      <div class="child">
    
        <h3>蓝色背景这是子组件</h3>
        // 作用域插槽
        <slot  :data="data"></slot>
      </div>
    </template>
    
     export default {
        data: function(){
          return {
            data: ['one','two','three']
          }
        }
    }

    //父组件classfathernumberforitem in number.data
    这就是模板
    //子组件classchild// 作用域插槽data

    export default {
    data: function(){
    return {
    data: [
    onetwothree]
    }
    }
    }

     注意

     注意

     

    内置指令v-slot,可以缩写为【#】

     子组件用法保持不变,父组件中

    子组件用法保持不变

    • slot属性弃用,具名插槽通过指令参数v-slot:插槽名 的形式传入,可以简化为 #插槽名
  • slot属性弃用,具名插槽通过指令参数v-slot:插槽名 的形式传入,可以简化为 #插槽名
  • slotv-slot:插槽名#插槽名

    <template #header>
         <div>具名插槽</div>
       </template>
    <template #header>
         <div>具名插槽</div>
       </template>
    • slot-scope属性弃用,作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
  • slot-scope属性弃用,作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
  • slot-scopev-slot:xxx="slotProps"

    <!--作用域插槽-->
       <template #footer="slotProps">
         <div>
          {{slotProps.testProps}}
         </div>
       </template>
    <!--作用域插槽-->
       <template #footer="slotProps">
         <div>
          {{slotProps.testProps}}
         </div>
       </template>

    slotProps
    {{slotProps.testProps}}

    • v-slot属性只能在<template>上使用,但在【只有默认插槽时】可以在组件标签上使用
  • v-slot属性只能在<template>上使用,但在【只有默认插槽时】可以在组件标签上使用
  • v-slot<template>只有默认插槽时

    <template v-slot>
         <div>默认插槽</div>
     </template> 
    <template v-slot>
         <div>默认插槽</div>
     </template> 

    总结

    总结

     1.通过上述的描述,关于组件的了解有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,已经丰富了多样式的组件,提高了复用性。

    2.从组件的基本使用、组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位

    3.参考资料官方文档

    官方文档

     

    » 本文来自:前端开发者 » 《Vue学习系列(二)——组件详解_蓝瞳_前端开发者》
    » 本文链接地址:https://www.rokub.com/73750.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!