Vue中插槽(slot)以及动态组件

vue中的插槽slot简单实现a：代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue中的插槽slot</title><sc...

爱上口袋的天空

2918人浏览 · 2019-12-13 20:12:05

爱上口袋的天空 · 2019-12-13 20:12:05 发布

vue中的插槽slot简单实现
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的插槽slot</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <child>
            <!--我们在这个组件里面再添加一些div，使用slot嵌入进去,通过slot表示标签的唯一性-->
            <div class="header" slot="header">Header</div>
            <div class="footer" slot="footer">footer</div>
        </child>
    </div>
    <script>
        Vue.component('child',{
            //下面的``这个符号是ES6语法,slot通过name名称确定嵌入标签的位置
            template:`<div>
                        <slot name='header'></slot>
                        <div class='content'>content</div>
                        <slot name='footer'></slot>
                      </div>`,
            
        });
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root'
        });        
    </script>
</body>
</html>

b：效果

vue中的作用域插槽
a：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的作用域插槽slot</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <child>
               <!--在子组件中我们传递一个插槽,这是一个作用域插槽，
                作用域插槽必须以template开头结尾，并且申明子组件中
                传递过来的数据都放到props中，并且将数据展示在<h1>中，
                这个template中我们可以随便定义<h1></h1>，div等等都行    
                --> 
               <template slot-scope="props">
                    <h1>{{props.item}}</h1>
               </template>
        </child>
    </div>
    <script>
        Vue.component('child',{
            data() {
                return {
                    list:[1,2,3,4]
                }
            },
            //这个是子组件向父组件传递数据
            template:`<div>
                        <url>
                            <slot v-for="item of list" :item="item">
                            </slot>
                        </url>
                      </div>`,
            
        });
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root'
        });        
    </script>
</body>
</html>

b：效果

动态组件与v-once指令
a：动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件component</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--使用动态组件component，通过type决定展示-->
        <component :is="type"></component>
        <!--定义一个button-->
        <button @click="handlerClick">改变</button>
    </div>
    <script>
        //下面定义两个全局组件
        Vue.component('child-one',{
            template:'<div>child-one</div>',
        });
        Vue.component('child-two',{
            template:'<div>child-two</div>',
        });
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data() {
                 return {
                     type:'child-one'
                 }
             },
             methods: {
                handlerClick:function(){
                    if(this.type==='child-one'){
                        this.type = 'child-two';
                    }else{
                        this.type='child-one';
                    }   
                }
             },
        });        
    </script>
</body>
</html>

效果：

b：v-once指令
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}$/, //不连续的两位字母// /^