vue知识点之组件，插槽，数据劫持，事件发射，模块化

ゝ一世哀愁。 2022-09-15 12:26 146阅读 0赞

# 1.MVM: #

m:model:数据模型，data\[数据state\]

v:**view 视图，模板，template**

数据绑定？事件绑定

v-bind v-on \{ \{\}\} 这些都是vm进行数据解析

vm viewModal(封装dom)

# 2.vue实例 #

模块化，一切皆模块，一个模块是一个html/css/js的一个完整功能的单元，自定义标签，（vue能够识别自定义标签）

vue.状态

vue.方法

# 3.渲染 #

将状态显示到视图中 model–>view

绑定（渲染）

1.双打括号

可以存在任意变量或者表达式

\{ \{msg\}\}

\{ \{foo()\}\}

\{ \{JSON.stringify(obj)\}\}

2.指令

v-on:eventType.事件修饰符 = “事件处理函数” 简写为@

eventType:

dom类型，submit，hover

自定义类型：事件的名字自己决定，常用于组件通信中

v-bind:属性名 = “属性值” 简写为：

![Image 1][]

v-for="" 用来遍历

v-if 存放布尔值

v-else-if

v-else

v-bind:model

v-model

双向数据绑定

1.将msg值作为input的默认值

2.用户操作表单，v-moel会将表单元素中的值映射到msg中

v-html:将html代码输出并解析

# 4.生命周期 #

beforeCreated

Created

beforeMounted

mounted

beforeUpdate

Updated

beforeDestroy

destroyed

# 5.双向数据绑定 #

v-model,表单

# 6.事件 #

# 7.计算属性 #

计算属性不能传参

## 1.定义 ##

像函数一样定义，但是无法接收参数

1）定义在computed中

data: { 
                    students: [{ 
                        id: 1,
                        name: "zs",
                        gender: "male"
                    }, { 
                        id: 2,
                        name: ls,
                        gender: "female"
    
                    }, { 
                        id: 3,
                        name: "ww",
                        gender: "female"
                    }, { 
                        id: 4,
                        name: "zq",
                        gender: "male"
                    }, ]
                },
                computed: { 
                    students_male: function() { 
                        // 计算属性来源于data中的变量
                        // 对data中数据进行计算后输出
                        return this.students.filters(item => { 
                            return item.gender === 'female';
                        })
                    }
                },

## 2.特性 ##

1）多次调用同一个个计算属性，计算属性函数会执行一次

2）当被计算的属性发生变化，计算属性会重新执行

## 3.调用 ##

就像属性一样被调用,不加括号

# 8.监听器 #

对data中的属性进行监听

1）定义

data: { 
                    msg: "hello",
                    params: { 
                        name: "",
                        type: ""
    
                    }
                },
                watch: { 
                    msg(newVal, oldValue) { 
                        alert(newVal + '-' + oldValue);
                    },
                    // 对于对象的监测，进行深度监测
                    // 'params.name': function(newVal, oldVal) { 
                    // alert("JSON.stringify(newVal)+'-'+JSON.stringify(oldVal)");
                    // },
                    params: { 
                        deep: true,
                        hansler: function(newVal, oldVal) { 
                            alert(Json.stringify(newVal) + '-' + JSON.stringify(oldVal));
                        }
                    }
    
                }

# 9.模块化 #

vue中模块时最小的组成单元

## 1.组件创建 ##

vue参数的定义过程

组件的跟有且只有一个

let boxContainer = { 
                template: ` <div class="box"> <div class="header"> <div class="title"> { {title}} </div> <div class="right">tab</div> </div> <div class="container"> <slot></slot> </div> </div> `,
                // data中为主键内部的局部变量，只有该组件能用
                data() { 
                    return { 
    
                    }
                },
                // 接收别人传给你的数据
                props: { 
                    title: { 
                        type: String,
                        required: true
                    }
                }
            }

## 2.组件的注册 ##

1）全局注册

`Vue.component('briup-list',briuplist)`

2）局部注册

将组件注册到某个组件的内部，只有该组件才能使用这个组件

let ArtclePage = { 
    	template:``,
    	data(){ 
    	return { 
    	
    	}
    	}
    },
    components:{ 
    	'briup-list':briupList
    }

## 3.参数传递 ##

组件内部如何传递参数？

形参
    let briupList = { 
    props:['data']
    }
    形参、类型限制
    let briupList = { 
    props:{ 
    data:Array
    }
    }
    形参、类型限制、校验
    let briupList = { 
    props:{ 
    data:{ 
    type:Array,
    default:[],
    validator:function(val){ 
    
    }
    }
    }
    }

如何传递参数？

参数传递实际上是属性的绑定

# 10.插槽 #

## 10.1简单插槽 ##

不对该插槽进行赋值等操作，默认的

<article-Page>
    	<div slot-scope="scope"></div>
    </article-Page>
    ============
    let articlePage = {
            template: `
                <div>
                    <div class="header">
                        <slot></slot>  
                    </div>
                    
                        
                </div>
            
            `
        }
    
    
    components:{
    "article-Page":articlePage
    
    }

## 10.2具名插槽 ##

component: article-page
              <div>
                <slot name="header"></slot>
                <slot></slot>
                <slot name="footer"></slot>
              </div>
              调用
              <article-page>
                <div slot="header"></div>
                <div></div>
                <div slot="footer"></div>
              </article-page>

## 10.3作用域插槽 ##

作用于插槽可以通过回调函数的思想来理解

<ul>
    	 <li v-for="item in data">
             <slot v-bind:row="item">
             </slot>
    	</li>
    
    </ul>
    
    component:article-page
    <briup-list>//这个相当于回调函数的函数名
    
    	
    	//相当于回调函数
    	<div slot-scope="scope">
            
            {
       {scope.row.xxxx}}
         </div>
    </briup-list>

父组件调用子组件，子组件在执行过程中又返回调用父组件的内容【插槽】，在调用过程中通过v-bind为这个插槽传递参数。

在父组件通过slot-scope="scope"中的scope来获取传递过来的参数，进行自定义渲染

# 11.事件发射 #

$emit 可以触发监控在当前组件上的指定事件

<briup-info @close="close" msg="hello world"></briup-info>
            <briup-info @close="close" msg="你好"></briup-info>
    <script>
     let briupInfo = {
                    template: `
                    <div :style="{
                        padding:'1em',
                        backgroundColor:'pink',
                        borderRadius:'5px',
                        marginBottom:'1em'
                    }" ref="info">
                        {
       {msg}}
                        <div @click="closeHandler(msg)">关闭</div>
                    </div>
                `,
                    props: ['msg'],
                    methods: {
                        closeHandler(msg) {
                            this.$refs.info.style.display = "none";
                            // 发射事件，把这个事件发送给父组件，子组件向父组件传递数据
                            this.$emit('close', msg);
                        }
                    },
                }
                // 组件注册
            Vue.component("briup-info", briupInfo);
    
            new Vue({
                el: "#app",
                methods: {
                    close(msg) {
                        alert("关闭了" + msg);
                    }
                },
            })
    </script>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]

[Image 1]: 
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/500c6e3c087b4ab8a1d16ae6d40daeb5.png