第5章 Vue组件《Vue应用程序开发》教学课件.pptxVIP

《Vue应用程序开发》?精品课件合集?精品课件合集 Vue应用程序开发（第五章 Vue组件） 目 录1、组件的基本使用2、Vue组件嵌套3、组件通信 1组件的基本使用1.1 什么是组件？1.2 体验自定义组件1.3 组件的使用 1. 组件的基本使用组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。1.1 什么是组件? 1. 组件的基本使用Vue.js 的组件使用有三个步骤，具体步骤如下：1.2 组件的使用1. 调用 Vue.extend() 方法创建组件构造器var myComponent = Vue.extend({ // 选项}) 2. 调用 Vponent() 方法注册组件。Vponent(my-component, MyComponent) 3. 在 Vue 实例的作用范围使用组件。 div id=app my-component/my-component /div 1. 组件的基本使用1.3 体验自定义组件div id=app !-- 使用组件-- my-com/my-com /div HTMLscript // 1.创建一个组件构造器 var myComponent = Vue.extend({ template: ‘div欢迎来到翰海睿智教育平台/div’ }) // 2.注册组件，并指定组件的标签 Vponent(my-com, myComponent); new Vue({ el: #app’ }); /script JavaScript 1. 组件的基本使用（1）组件中的data必须是函数Vue 组件中 data 选项为什么必须是函数？因为一个组件可以在多处复用，如果 data 是一个对象，那么所有复用的组件实例将都显示相同内容，如此就限制了组件复用的意义。构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。1.3 组件的使用 1. 组件的基本使用（2）演示组件中的 data 必须是函数1.3 组件的使用div id=app my-com/my-com /div script Vponent(my-com’,{ template:div{{ msg }}/div’, data(){ return{ msg : 欢迎来到翰海睿智教育平台 } } }) let vm = new Vue({ el:#app })/script 2Vue组件套件2.1 使用props2.2 使用 Slot 插槽内容分发 2. Vue组件套件Vue 两大核心思想组件化数据驱动 组件本身也可以包含组件 var child = Vue.extend({ template: div我是子组件!/div }); var parent = Vue.extend({ template: div我是父组件 child-component/child-component/div’, components: {child-component’: child } }); Vponent(parent-component, parent); 需要注意的是从 Vue2.0 开始，每个组件必须只有一个根元素。不再允许片段实例。 2. Vue组件套件2.1 使用props组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。通常可以使用 props 把数据传给子组件。script Vponent(child, { // 声明 props，就像 data 一样，prop 可以用在模板内 // 同样也可以在组件实例中像 “this.message” 这样使用 props: [message], template: span{{ message }}/span }) // 初始化根实例 var app = new Vue({ el: #app }) /script 2. Vue组件套件2.1 使用props需注意的是在子组件中定义 prop 时，使用了 camelCase 命名法。由于 HTML 特性不区分大小写，camelCase 的 prop 用于特性时，需要转为 kebab-cas