vue组件中的一些辅助功能和注意事项

Vue的组件api 主要来自三部分 props：外部数据传递给组件events:组件触发外部状态的改变slots:各个组件的混合组合使用javascript对子组件操作的备用方案：使用ref为子组件添加一个索引id 可以使用 vueobj.$refs.refID来获取注意：$refs只在组件渲染完成后才填充，它仅作为访问子组件的应急方案（暂时没有发现在何种情况下会使用

v折耳

3069人浏览 · 2016-12-12 12:11:11

v折耳 · 2016-12-12 12:11:11 发布

Vue的组件api 主要来自三部分

props：外部数据传递给组件

events:组件触发外部状态的改变

slots:各个组件的混合组合使用

javascript对子组件操作的备用方案：使用ref为子组件添加一个索引id 可以使用 vueobj.$refs.refID来获取

注意：$refs只在组件渲染完成后才填充，它仅作为访问子组件的应急方案

（暂时没有发现在何种情况下会使用，先记着吧）

异步组件：

vue.js 为组件顶一个工厂函数

Vue.component('async-example', function (resolve, reject) {}

resol ve({

template:'<div></div>'

});

工厂函数会接收resolve 的回调，在接到到的时候加载。

reject(reason)为加载失败，给予提示。

配合Webpack可以分割代码，极大的优化前端的效率

递归组件：

组件可以递归调用自己，但是slot必须有name,需要小心掉入死循环

<body>
    <div id="app">
        <child mes="grandfater" id="grandfater">
            <child mes="fater" id="fater" slot="f1">
                <child id="son" mes="son" slot="f2"></child>
            </child>
        </child>
    </div>
    </body>
    <script>
         var app=new Vue({
            el:'#app',
            components:{
                'child':{
                    props:['mes'],
                    template:'<div>\
                             <slot name="f1"></slot>\
                            {{mes}}\
                            <slot name="f2"></slot>\
                        </div>'
                }

            }

         })

template中自调用使用v-if，保证最后v-if 最终是false 是有效避免死循环的好习惯

内联模板：

组件内使用inline-template,组件将它的内容当做模板，而不是把它的当做分发内容

通俗的来将，inline-template的使用，可以将 <my-compontent>的分发内容，临时替换掉<my-compontent>原本的模板内容，但是却可以使用<my-compontent> 中component的数据方法。（可以应用于这种情况，你想把父级组件的布局样式替换掉，却又懒得去重复定义数据方法）

注意：该情况的使用同样遵循，组件的通信原则

 <body>
        <div id="app">
            <my-component inline-template :mes1="ddd">
                <div>
                    <div v-bind:class="cla1">{{mes1}} inline-template</div>
                </div>


            </my-component>


    </div>
        </div>
    </body>
    <script>
     Vue.component('my-component',{
             props:{
                mes1:{
                    type:Array,
                    default:function(){
                        return [111,222,333,44,555];
                    }
                },
                cla1:{
                    type:String,
                    default:function(){
                        return 'compontent-class';
                    }


                }
            },
            template:'<div >{{mes1}}</div>',

        });


        var app=new Vue({
            el:"#app",
            data:{ddd:'child_data'},
            })
    </script>

X-Templates:

另一种模板的定义方式，但是会将模板和其他定义隔离，不推荐使用

ps:在处理静态组件时：推荐使用 v-once来渲染组件，它会将渲染效果缓存起来，不再比对更新

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}$/, //不连续的两位字母// /^