07第4章Vue.js组件第1节组件的基本使用.pptxVIP

第4章 ：Vue.js组件 《Vue应用程序开发》 01 02 03 0 05 目 录 CONTENTS 第4章 Vue.js组件 组件是可复用的 Vue 实例，通过“” 包含组件名（如button-counter）在模板中使用。我们可以把组件作为自定义元素来使用。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。 前端组件化开发是现在前端框架中一个非常重要的思想，将页面内容进行拆分之后，可独立开发独立维护，可复用性大大提高。哪个地方出问题，直接去修改的对应的组件即可。团队人员可以各自修改自己的组件，相互不影响，不冲突。 第4章 Vue.js组件 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 4.1.1全局组件 官方提供了直接使用Vue的component方法可以直接全局注册组件。 （1）语法格式如下： 第一步：注册 Vponent(tagName, options) Vponent(my-component,{ template: divh1这里是组件的内容/h1h2这里是组件的内容/h2/div }); tagName 为组件名，options 为配置选项。 第二步：使用组件 我们可以通过my-component/my-component来调用组件。 （2）使用范围：所有实例都能用全局组件。 4.1.2局部组件 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。 （1）语法格式如下： 第一步：注册 var app= new Vue({ el: #app, components: { my-component : Child } }); my-component为组件名，Child为配置选项。 第二步：使用组件 我们可以通过my-component/my-component来调用组件。 （2）使用范围：只能在当前实例中使用该组件。 4.1.3组件内的data必须是一个函数 组件中的 data 不是一个对象，而是一个函数。 如果 data 是一个对象则会影响到其他实例，因为JavaScript对象是引用类型。 data不是函数 data是函数 4.1.4使用template元素创建组件 为了使HTML代码和JavaScript代码是分离的，便于以后的阅读和维护，我们通常建议使用script或template标签创建组件模板内容。 在上例中，我们将组件内的元素直接写在template/template标签内，这样就可以正常给标签换行，符合我们之前写HTML标签的写法规则，使代码的可读性变得更强。这里同样要注意template/template内只能由一个根节点，否则浏览器会报错。 4.1.5组件嵌套 组件嵌套是把组件与组件嵌套在一起，在父组件下的模板中，以标签的形式调用子组件。下图组件树的示意图形象的展示了组件之间的层级关系： 4.1.5组件嵌套 实例： 父组件parent/parent以标签的形式调用了子组件my-child1/my-child1和my-child2/my-child2。 4.1.6使用props传递数据 组件不仅仅要把模板的内容进行复用，更重要的是组件间要进行通信。通常外部的数据要传给组件或者父组件的数据要传给子组件，这种正向传递数据的过程就是通过props来实现的。 在组件中，使用选项props来申明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。 1. props的值是数组 div id=app my-component message=来自父组件的数据/my-component /div script Vponent(my-component, { props: [message], template: div{{ message }}/div }); var app = new Vue({ el: #app }) /script 1. props的值是数组 使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。 div id=app input type=text v-model=message my-componen