vue2.x进阶知识点总结

最新推荐文章于 2024-07-05 23:33:29 发布

大大黄、

最新推荐文章于 2024-07-05 23:33:29 发布

阅读量429

点赞数

分类专栏： Vue 前端文章标签： vue.js

本文链接：https://blog.csdn.net/first_helloword/article/details/109903790

版权

本文详细总结了Vue2.x的组件化高级特性，包括插槽的使用（普通插槽、具名插槽及2.6版本后的新用法）、编译作用域和作用域插槽。此外，深入介绍了Vuex的状态管理，如Vuex的作用、管理状态、使用方式、状态修改规则和模块化。最后，探讨了Axios的使用场景、配置选项以及如何在Vue中封装和使用Axios。

摘要由CSDN通过智能技术生成

组件化高级

注：可以先看vue基础篇

插槽

1.slot

组件模板定义的时候需要插槽的话给一对 <slot> </slot> 标签即可，在使用子组件的时候，组件内部填充的所有内容，元素就会被匹配到这个插槽上
本身 <slot> </slot> 可以给一个默认值，该默认值在使用这个组件没有给插槽内容的时候会自动使用

2.具名插槽 slot

组件模板定义的时候插入 <slot> </slot> 插槽，此时子组件被使用时候，内部插入内容就会匹配到这个插槽，因为二者都没有名字，因此能够匹配，当 <slot name='center'> </slot> 当定义模板使用插槽给插槽一个名字的时候，那么直接内部使用标签填充则不会匹配到这个插槽，只有当使用 slot=“center” 才能匹配到这个插槽如 <span slot='center'>我匹配到了</span>

注意： 2.6版本起该具名插槽方式已被废弃

新的具名插槽方式（**重点！！！！！！！！**2.6版本更新后用法）

组件模板定义的时候插入 <slot> </slot> 插槽，此时子组件被使用时候，内部插入内容就会匹配到这个插槽，因为二者都没有名字，因此能够匹配，当 <slot name='center'> </slot> 当定义模板使用插槽给插槽一个名字的时候，那么直接内部使用标签填充则不会匹配到这个插槽。此时在父页面使用 <template v-slot:center> </template> 来锁定这个name 为 center 的这个插槽。如果<slot> </slot> 没有name属性的话，其实Vue会给它一个默认的 name 为 default , 因此匿名插槽也可以通过 <template v-slot:default> </template> 来获取这个插槽

编译作用域

Vue 的编译作用域：首先看模板是谁的，那么这个范围内的变量就从谁那里找，因此子组件模板的作用域就是这个子组件，父组件的模板作用域就是这个父组件，Vue实例的作用域就是这个实例

作用域插槽( 2.6版本更新后用法 )

作用域插槽是slot 一个比较难理解的点

父组件替换插槽的标签，但是内容由子组件来提供的

1.和具名插槽一样，绑定了插槽之后，由于要获取子组件的数据，或者方法，因此 v-slot:子组件的name值=‘自定义一个名字（该名字用来接收子组件传递的数据）’

2.那么子组件如何将数据传递出去呢？？直接 :data = “传递的数据” 此时Vue内部会将父页面自定义的名字与这个 :data 数据绑定起来，此时父页面的 自定义名字 . data 就是这个 :data 我们就可以通过这个方式将数据传到父页面，供父页面使用

<body>
  <div id="app">
    <cpn></cpn>
    <cpn>
      <template v-slot:data="slotProps">
        <h2>{
  {slotProps.user}}</h2>
      </template>
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <slot name="data" :user="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{
  { item }}</li>
        </ul>
      </slot>
    </div>
  </template>

  <script src="./lib/vue.js"></script>
  <script>
    const app = new Vue({
    
      el: "#app",
      data: {
    },
      methods: {
    },
      components: {
    
        'cpn': {
    
          template: '#cpn',
          methods: {
    
            show() {
    
              return console.log(123);
            }
          },
          data() {
    
            return {
    
              pLanguages: ['JavaScript', 'C', 'C++', 'Java', 'C#', 'Pathon'],
              user: {
    
                lastName: '123',
                firstName: 'wyj'