组件基础

  一、组件作用

       组件（Component）是 Vue.js 最强大的功能之一。

        组件可以扩展 HTML 元素，封装可重用的代码。

        组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

vueselect组件 vue 组件_自定义属性

        上图由页头、侧边栏组成，我们可以把他们理解为组件，每个组件又包含了其它的像导航链接、博文之类的组件，这样做的好处是灵活方面，真正做到了面向对象的闭合原则

  二、注册组件

全局注册（所有示例都能使用全局组件）

       全局注册的语法格式为 Vue.component(tagName, options),tagName 为组件名，options 为配置选项（注意:一个组件的 data 选项必须是一个函数，使用闭包的方式放置数据污染）。

调用组件：<tagName></tagName> (注组件名尽量用小写)

实例代码：

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 调用 --> <button-counter></button-counter> </div> <script> //全局注册组件(注意先全局注册组件然后再挂载到vue实例上面) Vue.component("button-counter", { data: function() { return { name: "陶务华" }; }, template: "<p> {{name}}在前端小课体验局部注册组件</p>" }); var obj = { el: "#app" }; new Vue(obj); </script> </body> </html>

局部注册（实例选项中注册局部组件，这样组件只能在这个实例中使用）

调用组件：<templateName></templateName>

实例代码：

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <register ></register> </div> <script> const vm = new Vue({ el:'#app', data:function(){ return{ } }, components:{ register:{ template:'<h1> 我在前端小课学习局部注册组件</h1>' } }, methods: { }, }); </script> </body> </html>

三、通过 Prop 向子组件传递数据

  • 为什么使用props 传值

       子组件无法访问父组件的数据和方法，所以延伸出props

  • 如何使用

       3.1 父组件引用子组件并通过自定义属性的方式传递数据（注意:自定义属性的命名需要分割式，不建议驼峰式。详情查看vue官方 https://cn.vuejs.org/v2/guide/components-props.html）

       3.2 注册父组件传递子组件的自定义属性

       3.3 子组件就可以调用了

  • 代码示例

       3.3.1 局部组件的传值


 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 第一步、父组件可以在引用子组件的时候通过属性绑定的形式（v-bind：自定义属性） 把需要传递给子组件的数据传过去 --> <con1 v-bind:parentmsg="msg"></con1> </div> <script> const obj = { el: '#app', data: function () { return { msg: 'taowuhua' } }, components: { con1: { // 第二步、 把父组件传递的自定义属性定义下，然后子组件就可以用了 props: ['parentmsg'], // 第三步、 子组件无法访问父组件间的数据和methods中的方法 // 组件挂载在vm上,和子组件相关 template: '<p> {{parentmsg}}正在前端小课学习vue </p>' } } } // 创建vue实例 const vm = new Vue(obj) </script> </body> </html> 
       3.3.1 全局组件的传值
 
 
 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <register v-bind:name ='msg'></register> </div> <script> Vue.component("register", { data: function() { return { }; }, props:['name'], template: '<p >{{name}}正在前端小课学习全局注册组件</p>' }); new Vue({ el: "#app", data:function(){ return{ msg:'陶务华' } } }); </script> </body> </html>