Vue学习笔记
vue学习笔记
蓝胖胖。
这个作者很懒,什么都没留下…
展开
-
作用域插槽的简单使用
作用域插槽总结一句话就是父组件中替换插槽的标签的内容由子组件提供,一个简单的案例是当子组件中定义了一个数组,但数组内容在页面的显示方式由父组件来决定,由于组件是不可以跨作用域访问变量的,此时可以通过作用域插槽来实现在父组件模板中访问子组件中的数据在上图中数组内容的第一中显示方式是在子组件中定义的,显示默认的数据显示方式,而第二种显示方式是在父组件中定义的。实现方法是在子组件定义插槽时使用v-bind绑定子组件中的arr数组,绑定名字为data也可以为其他,接着在父组件中使用cpn组件的时候使用templ原创 2020-11-23 11:24:51 · 1589 阅读 · 0 评论 -
具名插槽的简单使用
插槽是给组件预留的空间,当封装组件时往往会给组件使用插槽,,插槽如何使用由父组件决定,插槽中的内容表示如果没有在该组件中插入其他任何内容,就默认显示插槽中的内容。具名插槽则是当子组件需要显示不同的效果时使用具名插槽,通过name属性给插槽命名。案例如下:上图中在子组件的模板中定义了三个具名插槽,分别为左中右,在父组件中使用两次cpn,第一次没有添加内容,第二次添加了内容,第二次使用时,cpn标签内的内容将会替换掉模板中的插槽内容,并根据插槽名字分别替换,效果如下:正如图所示,当使用cpn组件没有原创 2020-11-23 10:36:03 · 6757 阅读 · 1 评论 -
Vue学习笔记之父子组件通信
Vue学习笔记之通过props往子组件通信 今天学到组件通信的方法中的通过props像子组件传值,记录一下入门vue遇到的小问题第一步:先给父组件中绑定自定义属性 Vue.component('Parent',{ data(){ return{ msg:"我是父组件数据" } }, template:` <div> <p>我是父组件</p> <Child :childData='msg'&原创 2020-09-18 22:45:23 · 999 阅读 · 0 评论 -
vue学习笔记之splice()方法的使用
Vue学习笔记之splice()方法的使用。splice(index,len,item)是vue中数组变异的方法之一,可以用来删除,更新,和增加数组内容参数:index:数组下标len:为1或0item:更新或增加的内容使用方法:1,删除,当参数形式为splice(index,1)时表示删除下标为index的内容2,更新,当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值3,增加,当参数形式为splice(index,0,item)时表原创 2020-09-15 21:22:58 · 24382 阅读 · 2 评论