Vue组件

最新推荐文章于 2024-07-10 17:12:51 发布

一个想做架构师的前端开发学生

最新推荐文章于 2024-07-10 17:12:51 发布

阅读量148

点赞数

分类专栏： Vue 学习文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/M_ik_Z/article/details/120767928

版权

Vue 学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Vue组件

什么是组件化？

将一个复杂的问题拆分成很多个可以处理的小问题，再将其放入整体当中，很大的问题也会迎刃而解。
组件是构成页面中独立结构单元，主要以页面结构的形式存在。
不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。
组件化也是类似的思想：
- 如果将一个页面中的所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
- 但是如果将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那之后的整个页面的管理和维护就变得非常容易。
组件可以实现复杂的页面结构，提高代码的可复用性。

Vue 组件化思想

组件化是 Vuejs 中的重要思想。
- 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都可以被抽象成一颗组件树。
组件化思想的应用：
- 有了组件化的思想，我们在之后的开发中就要充分利用它。
- 尽可能将页面拆分成一个个小的、可复用的组件。
- 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

注册组件的基本步骤

组件的使用分为三个步骤：
- 创建组件构造器。
- 注册组件。
- 使用组件。

注册组件的步骤：

调用 Vue.extend() 方法创建组件构造器。
调用 Vue.component() 方法注册组件。
在 Vue 实例中的作用范围内使用组件。

<div id="app">
    <!-- 3. 使用组件 -->
    <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>

<script>
	// 1. 创建组件构造器
    const myComponent = Vue.extend({
        template: `
			<div>
    			<h2>组件标题</h2>
				<p>我是组件中的一个段落内容</p>
    		</div>
		`
    })
    
    // 2. 注册组件，并且定义组件标签的名称
    Vue.component('my-cpn',myComponent)
    
    let app = new Vue({
        el: 'app'
    })
</script>

查看运行结果：
- 和直接使用一个 div 看起来并没有什么区别。
- 但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用<my-cpn></my-cpn>来完成呢？

注册组件步骤解析

Vue.extend() :
- 调用 Vue.exted() 创建的是一个组件构造器。
- 通常在创建组件构造器时，传入 template 代表自定义组件的模板。
- 该模板就是在使用到组件的地方，要显示的 HTML 代码。
- 事实上，这种写法在 Vue2.x 的文档中几乎已经看不到了，会直接使用语法糖，但是很多资料话是会提到，而且这种方式也是后面的基础。
Vue.component() :
- 调用 Vue.component() 是将刚才注册的组件构造器注册为一个组件，并且给他起一个组件的标签名称。
- 所以需要传递两个参数：
  - 注册组件的标签名。
  - 组件构造器。

组件必须挂载在某个 Vue 实例下，否则它不会生效。

下面使用三次，第三次不会生效。

<div id="app">
	<!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <div>
    	<my-cpn></my-cpn>
    </div>
</div>
<!-- 这个并不会渲染出来，因为它没有在new Vue挂载的实例 #app 之下 -->
<my-cpn></my-cpn>

全局组件和局部组件

全局组件

当通过调用 Vue.component() 注册组件时，组件的注册是全局的。

这就意味着该组件可以在任意 Vue 实例下使用。

<div id="app1">
  <my-cpn></my-cpn>
</div>
<div id="app2">
  <my-cpn></my-cpn>
</div>
<script>
// 创建组件构造器
const myComponent = Vue.extend({
  template: `
  <div>
    <h2>组件标题</h2>
    <p>组件正文的内容</p>
  </div>
  `
})

// 注册组件
Vue.component('my-cpn', myComponent)
const app1 = new Vue({
  el: '#app1',
})
const app2 = new Vue({
  el: '#app2',
})
</script>

局部组件

如果注册的组件是挂载在某个实例中，那么就是一个局部组件。

通过 Vue 实例的 components 属性在实例中注册组件。
在下面这个例子中，app2 中的组件并没有渲染出来，而且会报错。

<div id="app1">
  <my-cpn></my-cpn>
</div>
<div id="app2">
  <my-cpn></my-cpn>
</div>
<script>
// 创建组件构造器
const myComponent = Vue.extend({
  template: `
  <div>
    <h2>组件标题</h2>
    <p>组件正文的内容</p>
  </div>
  `
})
const app1 = new Vue({
  el: '#app1',
  // 在实例内部注册组件
  components: {
    'my-cpn': myComponent
    // 另外一种写法：myCpn: myComponent，这种写法效果和上面的相同。
    // 如果在注册组件的时候使用了驼峰命名，那么在使用的时候需要转换成短横线分隔命名。 
  }
})
const app2 = new Vue({
  el: '#app2',
  // components: {
  //   'my-cpn': myComponent
  // }
})

父组件和子组件

在前面见到了组件树：
- 组件和组件之间存在层级关系。
- 而其中最重要的关系就是父子组件的关系。

父子组件关系的代码组成：

<div id="app">
   <parent-cpn></parent-cpn>
 </div>
 <script>
   // 创建一个子组件构造器
   const childComponent = Vue.extend({
     template: `
     <div>
       <p>我是子组件的内容</p>
     </div>
     `
   })
   // 创建一个父组件构造器
   const parentComponent = Vue.extend({
     template: `
       <div>
         我是父组件的内容
         <h2>我是父组件的一个标题</h2>
         <child-cpn></child-cpn>
       </div>
       `,
     components: {
       // 在父组件中注册子组件
       'child-cpn': childComponent
     }
   })
   const app = new Vue({
     el: '#app',
     // 在实例中注册父组件
     components: {
       'parent-cpn': parentComponent
     }
   })

父子组件错误用法：
- 当子组件注册到父组件的 components 时，Vue 会编译好父组件的模块。
- 该模板的内容已经决定了父组件将要渲染的 HTML （相当于父组件中已经有了子组件中的内容了。）
- 是只能在父组件中被识别的。
- 类似这种用法，是会被浏览器忽略的。

注册组件语法糖

在上面注册组件的方式会有些繁琐。
- 为了简化这个过程，提供了注册的语法糖。
- 主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。

全局组件注册语法糖

Vue.component('my-cpn',{
  template: `
		<div>
			<h2>组件标题</h2>
			<p>组件正文的内容</p>
		</div>
	`
})

局部组件注册语法糖

// 注册局部组件
let app = new Vue({
  el: 'app',
  components: {
    'my-cpn': {
  		template: `
				<div>
					<h2>组件标题</h2>
					<p>组件正文的内容</p>
				</div>
			`
	}
})

模板的分离写法

除了 Vue 组件的注册过程比较复杂，还有 template 模板的写法也比较麻烦。
如果将其中的 HTML 分离出来，然后挂载到对应的组件上，必然结构会变得清晰。

Vue 提供了两种方案来定义 HTML 模块内容。

使用标签。

<div id="app">
  <my-cpn></my-cpn>
</div>
<script type="text/x-template" id="myCpn">
  <div>
    <h2>组件标题</h2>
    <p>组件内容</p>
  </div>
</script>
<script>
  const app = new Vue({
    el: '#app',
    // 注册组件
    components:{
      myCpn:{
        template:'#myCpn'
      }
    }
  })
</script>

使用标签。

<div id="app">
  <my-cpn></my-cpn>
</div>
<template id="myCpn">
  <div>
    <h2>组件标题</h2>
    <p>组件内容</p>
  </div>
</template>
<script>
  const app = new Vue({
    el: '#app',
    // 注册组件
    components: {
      myCpn: {
        template: '#myCpn'
      }
    }
  })
</script>

组件可以访问 Vue 实例数据吗？

组件是一个单独功能模块的封装。
- 这个模板有属于自己的 HTML 模板，也应该有自己的数据 data。
组件不能访问 Vue 实例中的数据，而且即使可以访问，如果把所有的数据都放在 Vue 实例中，Vue 实例就会变得非常臃肿。
结论：Vue 组件应该有自己保存数据的地方。

组件数据的存放

组件对象也有一个 data 属性（也可以有 methods 等属性）。
只是这个 data 必须是一个函数。
而且这个函数返回一个对象，对象内部保存着数据。

组件的 data 为什么必须是一个函数？

因为函数在每一次调用的时候都会形成一个新的对象，这样就不会对同时使用多次组件的数据产生影响。

父子组件的通信

子组件是不能引用父组件或者 Vue 实例的数据的。
但是，在开发中，往往一些数据确实需要从上层传递到下层：
- 比如在一个页面中，我们从服务器请求到了很多的数据。
- 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
- 这时，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。
Vue 官方提供了两种方法进行父子间的通信。
- 通过 props 向子组件传递数据。
- 通过事件向父组件发送消息。
在真实的开发中，Vue 实例和子组件的通信和父组件和子组件的通信过程是一样的。

父传子：props

基本用法：

在组件中，使用选项 props 来声明需要从父级接收到的数据。
props 的传值有两种方式：
- 方法一：字符串数组，数组中的字符串就是传递时的名称。
- 方法二：对象，对象可以设置传递时的类型，也可以设置默认值。

<div id="app">
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
</template>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '我来了！',
      movies: ['我在时间尽头等你', '你的婚礼', '我要我们在一起']
    },
    // 注册组件
    components: {
      Cpn: {
        template: '#cpn',
        props: ['cmovies', 'cmessage'],
        data() {
          return {}
        }
      }
    }
  })
</script>

props 数据验证

在前面，我们的 props 选项是使用一个数组。
除了数组之外，我们也可以使用对象，当需要对 props 进行类型验证时，就需要对象写法了。
验证都支持哪些数据类型呢？
- String
- Number
- Boolean
- Array
- Object
- Data
- Function
- Symbol

当有自定义构造函数时，验证也支持自定义的类型。

function Person(firstName,lastName){
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post',{
  props: {
    author: Person
  }
})

子传父：$emit()

props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
这时，我们需要自定义事件来完成。
- 当子组件需要向父组件传递数据时，就用到自定义事件。
- v-on 不仅仅用来监听 DOM 事件，也可以用于组件间的自定义事件。

自定义事件的流程：

在子组件中，通过 $emit() 来触发事件。
在父组件中，通过 v-on 来监听子组件事件。

<div id="app">
  <child-cpn @increment="changeTotal" @decrement="changeTotal"></child-cpn>
  <h2>点击次数：{{total}}</h2>
</div>

<template id="childCpn">
  <div> 
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods: {
      changeTotal(counter) {
        this.total = counter
      }
    },
    // 注册子组件
    components:{
      'child-cpn':{
        template:'#childCpn',
        data(){
          return{
            counter:0
          }
        },
        methods:{
          increment(){
            this.counter++
            // 将子组件的 increment 事件和 counter 通过 $emit() 发射出去
            this.$emit('increment',this.counter)
          },
          decrement(){
            this.counter--
            // 将子组件的 decrement 事件和 counter 通过 $emit() 发射出去
            this.$emit('decrement',this.counter)
          }
        }
      }
    }
  })
</script>

父访问子

有时候需要父组件直接访问子组件，子组件访问父组件，或者是子组件访问根组件。
- 父组件访问子组件：使用 $children 或 $refs 。
- 子组件访问父组件：使用 $parent .

先来看一下 $children 的访问。

this.$children 是一个数组类型，它包含所有子组件对象。
通过一个遍历，取出所有子组件的 message 状态。

<div id="app">
  <parent-cpn></parent-cpn>
</div>
<!-- 父组件template -->
<template id="parentCpn">
  <div>
    <child-cpn1></child-cpn1>
    <child-cpn2></child-cpn2>
    <button @click="showChildCpn">显示所有子组件信息</button>
  </div>
</template>
<!-- 子组件template -->
<template id="childCpn1">
  <h2>我是子组件1</h2>
</template>
<template id="childCpn2">
  <h2>我是子组件2</h2>
</template>

<script>
  Vue.component('parent-cpn', {
    template: '#parentCpn',
    methods: {
      showChildCpn() {
        for (let i = 0; i < this.$children.length; i++) {
          console.log(this.$children[i].message);
          // 输出的结果是子组件中的 message 中的内容。
        }
      }
    },
    components: {
      childCpn1: {
        template: '#childCpn1',
        data() {
          return {
            message: '我是子组件1'
          }
        }
      },
      childCpn2: {
        template: '#childCpn2',
        data() {
          return {
            message: '我是子组件2'
          }
        }
      }
    }
  })
  const app = new Vue({
    el: '#app',
  })
</script>

子访问父

子访问父使用 $parent 。

这种访问方式在开发中不会常用。

<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
 <div>
   <h2>我是子组件</h2>
   <button @click="btnClick">访问父组件</button>
 </div>
</template>
  
<script>
  const app = new Vue({
    el: '#app',
    data:{
      message:'我是父组件的内容'
    },
    components:{
      'cpn':{
        template:'#cpn',
        methods:{
          btnClick(){
            console.log(this.$parent.message);
            // 输出结果是 Vue 实例中的 message 中的内容
          }
        }
      }
    }
  })
</script>

访问根组件

使用 $root 访问根组件，一般也不常用。
使用方法参照父子访问的方法。

插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
例子：
- 移动网页中的导航栏：
  - 移动开发中，几乎每个页面都有导航栏。
  - 导航栏我们必然会封装成一个插件，比如 nav-bar 组件。
  - 一旦有了这个组件，我们就可以在多个页面中复用了。

如何封装这类组件呢？slot

如何去封装这类的组件呢？
- 他们有很多区别，但是也有很多共性。
- 如果每一个单独封装一个组件，显然不合适，比如每个页面都返回，这部分内容我们就要重复去封装。
- 但是如果封装成一个，也不合理：有些左面是菜单，有些是返回，有些中间是搜索，有些是文字等等。
如何封装合适呢？抽取共性，保留不同。
- 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
- 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
- 是搜索框，还是文字，还是菜单，由调用者自己来决定。
这就是为什么我们要学习组件中的插槽 slot 的原因。

slot 基本使用

在子组件中，使用特殊元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。

插槽的使用方法：

<div id="app">
  <my-cpn>
    <h2>
      我是替换插槽的内容
    </h2>
    <p>
      我也是替换插槽的内容
    </p>
  </my-cpn>
</div>

<template id="myCpn">
	<div>
    <slot>我是插槽中的默认内容</slot>
  </div>
</template>
<script>
	Vue.component('my-cpn',{
    template:'#myCpn'
  })
  
  let app = new Vue({
    el: '#app'
  })
</script>

具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。
- 比如封装一个导航栏的子组件，就需要三个插槽，分别代表左边、中间、右边。
- 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
- 这个时候，就需要给插槽起一个名字。

如何使用具名插槽呢？

非常简单，只要给 slot 元素一个 name 属性即可。

<div>
  <!-- 没有传入任何内容 -->
  <my-cpn></my-cpn>
  <!-- 传入某一个内容 -->
  <my-cpn>
  	<span slot="left"></span>
  </my-cpn>
  <!-- 传入所有的内容 -->
  <my-cpn>
  	<span slot="left">我是返回</span>
    <span slot="center">我是标题</span>
    <span slot="right">我是菜单</span>
  </my-cpn>
</div>

<template id="myCpn">
	<div>
    <slot name="left">我是左侧</slot>
    <slot name="center">我是中间</slot>
    <slot name="right">我是右侧</slot>
  </div>
</template>

<script>
	Vue.component('my-cpn',{
    template: '#myCpn'
  })
  
  let app = new Vue({
    el: '#app'
  })
</script>

作用域插槽

编译作用域

在学习插槽以前，先理解一个概念：编译作用域。

官方对于编译的作用域解析比较简单。

<div id="app">
	<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件标题</h2>
        <p>哈哈哈</p>
    </div>
</template>
<script src="../Vuecode/Vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        isShow: false
                    }
                }
            }
        }
    })
</script>

下面的代码是否可以被渲染出来？

中，使用了 isShow 属性。
isShow 属性即包含在组件中，又包含在 Vue 实例中。

答案：最终是可以渲染出来的，也就是使用的是 Vue 实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
而我们在使用的时候，整个组建的使用过程是相当于在父组件中出现的。
那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
因此，isShow 使用的是 Vue 实例的属性，而不是子组件的属性。

作用域插槽：准备

父组件替换插槽的标签，但是内容由子组件来提供。
先来提一个需求：
- 子组件中包括一组数据，比如：pLanguages:[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]。
- 需要在多个界面进行展示。
  - 某些界面是以水平方向——展示的。
  - 某些界面是以列表形式展示的。
  - 某些界面直接展示一个数组。
- 内容在子组件，怎么让父组件进行展示？
  - 利用 slot 作用域插槽就可以了。

作用域插槽的使用

<div id="app">
    <cpn></cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot :data="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
            }
          }
        }
      }
    })
  </script>

模块化开发

JavaScript 原始功能

在网页开发的早期，JavaScript 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候的代码还是很少的。
- 那个时候的代码直接写在

匿名函数的解决方案

可以使用匿名函数来解决重名问题。
- 在 aaa.js 文件中，我们使用匿名函数。
```
(function(){
    var flag = true
})()
```
但是如果要在 main.js 文件中用到 flag 要怎么做？
- 显然，另外一个文件中不容易使用，因为 flag 是一个局部变量。

使用模块作为出口

可以将需要暴露在外面的变量，使用一个模块作为出口。
- 在匿名函数内部，定义一个对象。
- 给对象添加各种需要暴露在外面的属性和方法（不需要暴露的直接定义即可）。
- 最后将这个对象返回，并且在外面使用一个 ModuleA 接收。
在 main.js 中，只需要使用属于自己的模块的属性和方法即可。

;
var ModuleA = (function(){
    // 定义一个对象
    var obj = {}
    // 在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info){
        console.log(info)
    }
    // 将对象返回
    return obj
})()

// 另外一个 js 文件

;
if(ModuleA.flag){
    console.log('小明是个天才')
}

ModuleA.myFunc('小明长得真帅')

console.log(ModuleA)

这就是模块最基础的封装，事实上模块的封装还有很多高级的话题。
- 先认识一下为什么需要模块，以及模块的原始雏形。
- 幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。
常见的模块化规范：
- CommonJS、AMD、CMD、也有 ES6 的 Modules。

CommonJS（了解）

模块化有两个核心：导出和导入。

CommonJS 的导出：

module.exports = {
    flag:true
    test(a,b){
        return a + b
    }
	demo(a,b){
        return a * b
    }
}

CommonJS 的导入：

// CommonJS 模块
let {test,demo,flag} = require('moduleA')

// 等同于
let _mA = require('moduleA')
let test = _mA.test
let demo = _mA.demo
let flag = _mA.flag

ES6 模块化的导出和导入

export 的基本使用

export 指令用于导出变量：

// info.js
export let name = 'why'
export let age = 18
export let height = 1.88

上面的代码还有另外一种写法：

// info.js
let name = 'why'
let age = 18
let height = 1.88

export {name,age,height}

导出函数或类

上面主要是输出变量，也可以输出函数或者输出类。

export function test(content){
    console.log(content)
}
export class Person {
    constructor(name,age){
        this.name = name
        this.age = age
    }
    
    run() {
        console.log(this.name + '在奔跑')
    }
}

// 另外一种写法
function test(content){
    console.log(content)
}
class Person {
    constructor(name,age){
        this.name = name
        this.age = age
    }
    
    run() {
        console.log(this.name + '在奔跑')
    }
}

export {test,Person}

export default

某些情况下，一个模块中包含某个功能，我们不希望给这个功能命名，而且希望导入者可以自己来命名。
- 这时可以使用 export default。
```
// info.js
export default function(){
    console.log('default function')
}
```
我们来到 main.js 中，这样使用就可以了
- 这里的 myFunc 是自己命名的，你可以根据需要命名它对应的名字。
```
import myFunc from './info.js'
myFunc()
```
另外，需要注意：
- export default 在同一个模块中，不允许同时存在多个。

import 使用

我们使用 export 指令导出了模块对外提供的接口，下面就可以通过 import 命令来加载对应的这个模块了。

首先，需要在 HTML 代码中引入两个 js 文件，并且类型要设置成 module。

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

import 指令用于导入模块中的内容，比如 main.js 的代码。

import {name,age,height} from "./info.js"

console.log(name,age,height)

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦。
- 通过 * 可以导入模块中所有的 export 变量。
- 但是通常情况下我们需要给 * 起一个别名，方便后续的使用。
```
import * as info from './info.js'

console.log(info.name,info.age,info.height,info.friends)
```

一个想做架构师的前端开发学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue组件

Vue组件什么是组件化？Vue 组件化思想注册组件的基本步骤注册组件步骤解析全局组件和局部组件全局组件局部组件父组件和子组件注册组件语法糖全局组件注册语法糖局部组件注册语法糖模板的分离写法组件可以访问 Vue 实例数据吗？组件数据的存放组件的 data 为什么必须是一个函数？父子组件的通信父传子：propsprops 数据验证子传父：$emit()父访问子子访问父访问根组件插槽如何封装这类组件呢？slotslot 基本使用具名插槽作用域插槽编译作用域作用域插槽：准备作用域插槽的使用模块化开发JavaScri
复制链接

扫一扫