vue 组件插槽（vue插件使用）

大家好，我是讯享网，很高兴认识大家。

Vue是一个渐进式的框架，渐进式指的是可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验，比如一个项目是使用Jquery构建的，此时就可以通过Vue对部分网页进行重构，而不必重构全部的网页。

el属性决定了这个Vue对象挂载到哪一个元素上。data属性会存储一些和绑定对象上相关联的数据。

assets文件夹

上述文件夹下面主要存放静态文件。

components文件夹

这个文件夹主要存放自定义组件

App.vue

这个文件是我们的根组件。

main.js

上述文件是我们的入口文件。

方式1

方式2

方式1

方式2

下面是一个动态属性名的例子，其中的值是静态的。

下面的循环遍历是以v-for为基础进行的。

下面是需要二次遍历的情况

下面是循环遍历对象的情况

下面是事件方法的基本用法。

讯享网

下面的这种写法也是可以的。

核心就是传递给目标函数一个$event。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 需要传入多个参数的情况，将$event放在最后。

下面是html结构

下面是获取方法：通过e.srcElement.dataset.xxx;

方式一：通过preventDefault。

方式二：通过事件修饰符来阻止

按键修饰符主要是检测用户按了什么键，主要是通过@keyup实现。

实现输入的时候，不做操作，只有按回车的时候才执行函数。

原生JS获取DOM对象

通过this.\(refs</li></ul><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> MVVM就是我们常说的双向数据绑定，Vue就是一个MVVM框架，M表示model,V表示View，在MVVM框架中model改变会影响view，view视图改变反过来会影响model。 </blockquote><ul><li>获取双向数据绑定的值（直接从this中拿即可）</li></ul><div></div><ul><li>对radio单选框进行双向数据绑定</li></ul><div></div><ul><li>对select选择框进行双向数据绑定</li></ul><div></div><ul><li>对checkbox进行双向数据绑定</li></ul><div></div><ul><li>对textarea进行双向数据绑定</li></ul><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 所谓的插值操作，可以理解为双大括号语法。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-once存在的意义是数据只渲染一次，当数据发生变化的时候，渲染的数据不随着变化。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-html存在的意义是将字符串形式的html文本渲染为真正的HTML。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-text能够实现类似双大括号插值的方法，但是这个指令不够灵活，一般不推荐使用。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-pre指令存在的意义是显示原生的内容，指的是不从vue中提取数据，双大括号显示的还是双大括号。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041555_61ce137b9b41e71226.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1320px; height: 246px;" alt='（千字长文）Vue核心基础解析_html' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-cloak指令存在的意义是控制JS解析引擎还未解析到双大括号语法或卡顿的时候，显示的内容。这个指令需要结合css语法。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041555_61ce137be3b7f17809.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1057px; height: 535px;" alt='（千字长文）Vue核心基础解析_vue.js_02' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-bind可以使用冒号进行缩写。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-bind动态绑定class。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041556_61ce137c3061630066.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1317px; height: 232px;" alt='（千字长文）Vue核心基础解析_前端_03' /><ul><li>也可以通过下面的语法</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041556_61ce137c8980266783.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1046px; height: 435px;" alt='（千字长文）Vue核心基础解析_html_04' /><ul><li>对象语法</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041557_61ce137d1122b4835.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1206px; height: 602px;" alt='（千字长文）Vue核心基础解析_vue.js_05' /><ul><li>数组语法</li></ul><ol><li><ol><li> </li></ol></li><li></li><li> </li></ol>加单引号的情况 <img src="https://s2.51cto.com/images/blog/202112/31041557_61ce137d910d491998.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 968px; height: 437px;" alt='（千字长文）Vue核心基础解析_前端_06' /> 不加单引号的情况 <ol><li> </li></ol><img src="https://s2.51cto.com/images/blog/202112/31041557_61ce137ddf3d640974.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1149px; height: 592px;" alt='（千字长文）Vue核心基础解析_vue.js_07' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-bind动态绑定style。 </blockquote><ol><li>加单引号的情况。</li></ol><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 此时的50px代表的是字面量并不是变量，但是如果不加单引号，此时的50px指的是一个变量，Vue会从data中寻找这个变量。 </blockquote><ol start="2"><li>不加单引号的情况</li></ol><img src="https://s2.51cto.com/images/blog/202112/31041558_61ce137e2772d72464.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1063px; height: 468px;" alt='（千字长文）Vue核心基础解析_javascript_08' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 调用计算属性的时候，后面不用加括号。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 下面是使用计算属性的一个例子。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041558_61ce137e6735d62966.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 900px; height: 768px;" alt='（千字长文）Vue核心基础解析_前端_09' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 一般情况下，我们不适用计算属性的set方法，请看下面的例子。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 计算属性是有缓存机制的，以下面的例子为例，如果是methods，调用多少次，函数就需要执行多少次，但是如果是计算属性，调用多次，函数只执行了一次，极大的提高了性能。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041558_61ce137ebee1211878.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1053px; height: 327px;" alt='（千字长文）Vue核心基础解析_html_10' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-on的语法糖是@ </blockquote><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-on在调用的时候，是否加括号是一个指的我们探讨的问题。 </blockquote><ol><li>加不加都行的情况</li></ol><img src="https://s2.51cto.com/images/blog/202112/31041559_61ce137f33f1822055.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 957px; height: 120px;" alt='（千字长文）Vue核心基础解析_html_11' /><ol start="2"><li>假如函数需要接受一个参数的情况，如果加括号传入的是undefined，不加则传入的是事件对象。</li></ol><img src="https://s2.51cto.com/images/blog/202112/31041559_61ce137f7d04b57529.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 950px; height: 142px;" alt='（千字长文）Vue核心基础解析_html_12' /><ol start="3"><li>既需要event对象又需要自定义参数的情况</li></ol><img src="https://s2.51cto.com/images/blog/202112/31041559_61ce137fc332e4413.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1086px; height: 167px;" alt='（千字长文）Vue核心基础解析_vue.js_13' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 有些时候，我们拿到event的目的可能是进行一些事件处理，vue提供的这些修饰符就是来帮助我们方便的处理一些事件。 </blockquote><ul><li>.stop -阻止事件冒泡，调用event.stopPropagation()</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041600_61ce138022d5089748.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 679px; height: 175px;" alt='（千字长文）Vue核心基础解析_html_14' /><ul><li>.prevent - 调用event.preventDefault() 阻止默认事件的触发</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041600_61ce13807581d22342.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 842px; height: 108px;" alt='（千字长文）Vue核心基础解析_数据_15' /><ul><li>keyup：键盘弹起触发事件</li></ul><div></div><ul><li>keyup.enter：输入回车才会触发事件</li></ul><div></div><ul><li>.once点击回调只会触发一次</li></ul><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-if后面的条件为false的时候，对应的元素及其子元素不会渲染，v-else后面不用加条件。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041600_61ce1380e81983082.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1088px; height: 206px;" alt='（千字长文）Vue核心基础解析_javascript_16' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 所谓的input复用问题就是切换input后，用户原本输入的值还在。解决方案就是给每一个input添加key属性。 </blockquote><div></div><ol><li><ol><li> </li></ol></li><li>不渲染时是否在DOM中</li></ol><ul><li><ul><li> </li></ul></li><li>v-if如果条件为false时，对应的元素就不会存在与DOM中。</li><li>v-show如果条件为false的时候，仅仅是将元素的diplay属性置为none。<ul><li> </li></ul></li></ul><ol start="2"><li>如何选择</li></ol><ul><li><ul><li> </li></ul></li><li>如果需要频繁的进行显示和隐藏，使用v-show。</li><li>如果只有一次切换的情况，使用v-if。<ul><li> </li></ul></li></ul><ol start="3"><li> </li></ol><ol><li><ol><li> </li></ol></li><li>push</li><li>pop</li><li>shift</li><li>unshift</li><li>splice</li><li>sort</li><li>reverse<ol><li> </li></ol></li></ol><ol><li>通过下标修改元素。</li></ol><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-model主要用来实现双向数据绑定。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> v-model其实是一个语法糖，背后的本质包含了两个操作。 </blockquote><ol><li><ol><li> </li></ol></li><li>v-bind绑定一个value属性。</li><li>v-on指令给当前元素绑定input事件。<ol><li> </li></ol></li></ol><img src="https://s2.51cto.com/images/blog/202112/31041601_61ce13815d11189162.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 963px; height: 706px;" alt='（千字长文）Vue核心基础解析_前端_17' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 单个checkbox </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 多个checkbox的情况 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041601_61ce1381ca89c66024.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1314px; height: 673px;" alt='（千字长文）Vue核心基础解析_前端_18' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 只能选择一个的情况。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041602_61ce1382361a19492.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1099px; height: 710px;" alt='（千字长文）Vue核心基础解析_数据_19' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 可以选择多个的情况。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041602_61ce138299ac934219.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1205px; height: 711px;" alt='（千字长文）Vue核心基础解析_vue.js_20' /><ol><li>lazy修饰符</li></ol><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> lazy修饰符可以让数据在失去焦点或者回车时才会更新。 </blockquote><div></div><ol start="2"><li>number修饰符</li></ol><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> number修饰符可以让输入框汇中的内容自动转换为数字类型。 </blockquote><div></div><ol start="3"><li>trim修饰符</li></ol><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> trim修饰符可以过滤内容两边左右的空格。 </blockquote><div></div><ol><li>创建组件构造器</li></ol><div></div><ol start="2"><li>注册组件</li></ol><div></div><ol start="3"><li>使用组件</li></ol><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 如果使用驼峰命名法注册组件的时候，在使用组件的时候需要使用分割线进行分割，否则会报错。 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041603_61ce13831a2bd66818.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 601px; height: 562px;" alt='（千字长文）Vue核心基础解析_javascript_21' /><ul><li><ul><li> </li></ul></li><li>全局组件：意味着可以在多个Vue实例下面使用</li><li>局部组件：只能在某个Vue实例中使用<ul><li> </li></ul></li></ul><img src="https://s2.51cto.com/images/blog/202112/31041603_61ce1383512e45108.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 669px; height: 790px;" alt='（千字长文）Vue核心基础解析_html_22' /><div></div><ul><li>注册全局组件的语法糖写法</li></ul><div></div><ul><li>注册局部组件的语法糖写法</li></ul><div></div><ol><li>通过script标签</li></ol><img src="https://s2.51cto.com/images/blog/202112/31041603_61ce1383c025b44125.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 732px; height: 749px;" alt='（千字长文）Vue核心基础解析_html_23' /><ol start="2"><li>通过template标签</li></ol><div></div><img src="https://s2.51cto.com/images/blog/202112/31041604_61ce138437fab56779.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 1273px; height: 750px;" alt='（千字长文）Vue核心基础解析_javascript_24' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 组件中的data需要是一个函数通过return的形式返回。 </blockquote><div></div><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 组件data必须是函数主要是为了防止不同函数实例操作相同的数据，组件复用希望复用的是功能，而不是数据复用。 </blockquote><ol><li>通过props</li></ol><ul><li>数组形式</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041604_61ce1384b1e0248695.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 622px; height: 746px;" alt='（千字长文）Vue核心基础解析_数据_25' /><ul><li>对象形式（可以指定传入的类型，或指定默认值）</li></ul><img src="https://s2.51cto.com/images/blog/202112/31041605_61ce13853909893353.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 410px; height: 474px;" alt='（千字长文）Vue核心基础解析_前端_26' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 调用默认值的时机就是调用组件的时候没有传参，但是模板中却使用了这个参数，此时就会使用默认参数。如果默认参数是数组或者函数，default必须是一个函数的形式。 </blockquote><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 下面的写法是不支持的 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041605_61ce13857657239069.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 437px; height: 105px;" alt='（千字长文）Vue核心基础解析_html_27' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 但是支持下面的写法 </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041605_61ce1385d835217693.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 520px; height: 765px;" alt='（千字长文）Vue核心基础解析_html_28' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 比如props想使用的参数名是ChildMyMessage，在组件调用进行v-bind绑定的时候需要写成:child-my-message </blockquote><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 主要是通过子组件中调用\)emit方法将事件传递给父组件，父组件通过v-on监听这个事件并调用自己的函数。
- 父组件访问子组件
通过$children </blockquote><img src="https://s2.51cto.com/images/blog/202112/31041606_61ce13865328d99717.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 628px; height: 843px;" alt='（千字长文）Vue核心基础解析_html_29' /><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 通过$refs
- 子组件访问父组件
使用$parent </blockquote><img src="https://s2.51cto.com/images/blog//_61ce13870c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184" style="visibility: visible; width: 517px; height: 197px;" alt='（千字长文）Vue核心基础解析_vue.js_31' /><ul><li>任意组件访问根组件</li></ul><blockquote style="margin-top:5px;margin-bottom:5px;padding-left:1em;margin-left:0px;border-left:3px solid rgb(238,238,238);"> 通过$root

在Vue中最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽，一旦预留了插槽，就可以让使用者根据自己的需求来决定插槽中插入的什么内容。

插槽的基本用法

插槽的默认值：在调用组件的时候，如果不指定插槽内容的时候显示的结果

具名插槽slot的使用

vue中查找变量是往上查找。

主要是让父组件获取到子组件插槽对应的数据。

所谓的watch监听指的就是监听一个属性是否发生变化，如果发生变化则触发响应的函数。
1. 安装插件
1. 修改标签
这个生命周期函数是在页面加载的时候运行的。

scoped关键字可以让css样式只适用于局部vue组件。

主要是通过传递this。

所谓的props验证指的是对传入的props进行校验。

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行，这样会防止子组件意外变更父组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更的时候，子组件中所有的prop都将会更新为最新的值，这意味着不应该在一个子组件内部改变prop,如果这样做了，Vue会在浏览器的控制台发出警告。
2. 调用子组件的时候传入一个ref属性。
3. 通过this.$refs.xxx.属性获取数据。 </li><li> 通过this.$refs.header.方法执行子组件中的方法。
2. 子组件通过this.$parent.数据获取父组件的数据。 </li><li> 子组件通过 this.$parent.方法主动执行父组件中的方法。
实例分析
1. 父组件中的自定义事件是fatherEvent，父组件中的方法是hello。
1. 子组件通过$emit触发并进行传参。
1. 首先安装emitt插件
1. 定义函数并暴露对象
1. 需要发送数据的组件，广播事件
1. 需要接收数据的组件，监听事件
首先明确下组件之间的结构，Home组件中包含Input组件，Input组件时Home组件的子组件。keyword是Home组件中的数据。
- Home组件
- Input组件
所谓的非prop的Attribute属性继承指的是，如果传入的一个属性，在子组件中并未声明接收，这个属性将被子组件的根标签继承，让我们一起来看下下面的例子。

自定义Attribute继承，可以禁用默认继承，并指定哪些元素可以继承。

vue 组件插槽（vue插件使用）

方式一：通过preventDefault。

方式二：通过事件修饰符来阻止

相关推荐