1.背景
2.简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>父组件与子组件</h2> <pre> 这个概念很好理解: 组件中 包含 组件 结构层了父组件与子组件的关系 </pre> <hr> <div id="app"> <!-- 5.使用父组件--> <c-parent></c-parent> </div> <script> // 1.创建组件构造器(子组件) const componentChild = Vue.extend({ // 相当于一个模板 template: ' <div>' + ' <h5>我是 子组件</h5>' + ' 你好,我是自定义的子组件......' + ' </div>' }) // 2.创建组件构造器(父组件组件) const componentParent = Vue.extend({ template: '<div>' + ' <h4>我是 父类主键</h4>' + ' 你好,我是自定义的父组件......' + ' <c-child></c-child>' + ' </div>', // 3.注册子组件到父组件中 components: { 'c-child': componentChild } }) let app = new Vue({ el: '#app', // 4.注册父组件到vue实例中 components: { 'c-parent': componentParent } }) </script> </body> </html>
3.语法糖-简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>组件简写</h2> <pre> 就是相当于把第一步创建组件构造器合并在注册组件的时候写 </pre> <hr> <div id="app"> <!-- 2.使用组件--> <c-my></c-my> </div> <script> let app = new Vue({ el: '#app', // 1.创建主键并注册 components: { 'c-my': { template: '<div>我是简写的组件</div>' } } }) </script> </body> </html>
4.语法糖-简写-子父组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>组件简写-子父组件</h2> <pre> 就是相当于把第一步创建组件构造器合并在注册组件的时候写 </pre> <hr> <div id="app"> <!-- 2.使用组件--> <c-parent></c-parent> </div> <script> let app = new Vue({ el: '#app', // 1.创建主键并注册 components: { 'c-parent': { template: '<div>我是简写的父组件<c-child></c-child></div>', components: { 'c-child': { template: '<div>我是简写的子组件</div>' } } } } }) </script> </body> </html>
5.模板与js代码分离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>组件-模板与js分离</h2> <pre> 在之前的写法中js与模板的html代码柔和在一起了,如果模板代码比较多写起来很痛苦, 必须将模板定义在外边, 实现很简单弄个id就可以了 </pre> <hr> <div id="app"> <!-- 2.使用组件--> <c-parent></c-parent> </div> <!--父模板--> <template id="parentId"> <div>我是模板分离的父组件 <c-child></c-child> </div> </template> <!--子模板--> <template id="childId"> <div>我是模板分离的子组件 </div> </template> <script> let app = new Vue({ el: '#app', // 1.创建主键并注册 components: { 'c-parent': { template: '#parentId', components: { 'c-child': { template: '#childId' } } } } }) </script> </body> </html>
6.组件中数据访问
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>组件-中数据的访问</h2> <pre> 1.组件不能直接访问Vue实例数据,请自己测试,{{message}} 2.组件对象也有一个data属性(也可以有methods等属性，下面我们有用到) 只是这个data属性必须是一个函数 而且这个函数返回一个对象，对象内部保存着数据 </pre> <hr> <h2>案例如下:</h2> <div id="app"> <!-- 2.使用组件--> <c-parent></c-parent> </div> <!--父模板--> <template id="parentId"> <div>我是模板分离的父组件,父模板中的数据:{{messageParent}} <c-child></c-child> </div> </template> <!--子模板--> <template id="childId"> <div>我是模板分离的子组件 </div> </template> <script> let app = new Vue({ el: '#app', // 1.创建主键并注册 components: { 'c-parent': { template: '#parentId', // 组件中数据存放 data() { return { messageParent: '我是父组件中的数据' } }, components: { 'c-child': { template: '#childId' } } } } }) </script> </body> </html>
完美!