===重点重点开始 ==========================

(三) 组件化开发

1.创建组件构造器: Vue.extends()

2.注册组件: Vue.component()

3.使用组件(全局和局部组件)

一般方式:全局和局部组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 3.使用组件(要放到一个签中(<div>)) -->
  10.     <div>
  11.         <zjm></zjm>
  12.     </div>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15. <script>
  16.     // 1. 创建组件模版(一般方式)
  17.     const 组件名 = Vue.extend({
  18.         template: `<div><h2>一般方式的组件内容</h2></div>`
  19.     })
  20.     // 2.注册全局组件(标签名+组件名),可以在多个vue实例中使用,开如中一般不用全局组件.
  21.     Vue.component('zjm', 组件名)
  22.  
  23.     // Vue实例对象(开发中一般只有一个vue实例)
  24.     const app = new Vue({
  25.         el: '#app', //挂载管理元素
  26.         data: {},
  27.         // 2.注册局部组件(标签名+组件名)
  28.         // components: {
  29.         //     zjm: 组件名
  30.         // }
  31.     })
  32. </script>
  33. </body>
  34. </html>
  35.  
  36. 一般方式:全局和局部组件

一般方式:全局和局部组件

语法糖方式:全局和局部组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 3.使用组件 -->
  10.     <div>
  11.         <qjzjm></qjzjm>
  12.     </div>
  13.     <div>
  14.         <jbzjm></jbzjm>
  15.     </div>
  16. </div>
  17. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  18. <script>
  19.     // 1-2.创建注册全部组件(语法糖方式)
  20.     Vue.component('qjzjm', {
  21.         template: `<div><h2>全局组件内容-语法糖</h2></div>`
  22.     })
  23.     // root根组件
  24.     const app = new Vue({
  25.         el: '#app', //挂载管理元素
  26.         data: {},
  27.         // 1-2.创建注册局部组件(语法糖方式)
  28.         components: {
  29.             'jbzjm': {
  30.                 template: `<div><h2>局部组件内容-语法糖</h2></div>`
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </body>
  36. </html>
  37.  
  38. 语法糖方式

语法糖方式

4.模板分离(2种方法)

方法1: <script>标签方法(一般不用)

方法2: 使用<template>标签方法(常用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--4.使用组件-->
  10.     <div>
  11.         <qjcpn></qjcpn>
  12.         <jbcpn></jbcpn>
  13.     </div>
  14. </div>
  15. <!--3.分离组件中的模板,使用template标签方法,设id对应相应的组件,通过id联系在一起-->
  16. <template id="qjzjm">
  17.     <div>
  18.         <h1>全部组件:使用template标签方法,分离组件中的模板!</h1>
  19.     </div>
  20. </template>
  21. <template id="jbzjm">
  22.     <div>
  23.         <h1>局部组件:使用template标签方法,分离组件中的模板!</h1>
  24.     </div>
  25. </template>
  26. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  27. <script>
  28.     // 1-2.创建注册全部组件(语法糖方式),取个名字,后面跟个对象即可创建.
  29.     Vue.component('qjcpn', {
  30.         template: '#qjzjm',
  31.         data() {
  32.             return {
  33.                 msg: '组件中的msg数据'
  34.             }
  35.         }
  36.     })
  37.     const app = new Vue({
  38.         el: '#app',
  39.         data: {},
  40.         // 1-2.创建注册局部组件(语法糖方式)
  41.         components: {
  42.             'jbcpn': {
  43.                 template: `#jbzjm`
  44.             }
  45.         }
  46.     })
  47. </script>
  48. </body>
  49. </html>
  50.  
  51. 使用template标签方法

使用template标签方法

5.组件中数据,组件中的data必需是一个函数,同时返回是一个对象,vue实例中是一个属性不是一个函数,二者的数据不能直接访问,每次使用组件时就会调用data()函数,如果不是函数,组件在二次使用时,就会出现同一个数据.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <!--4.使用组件-->
  10.     <cpn></cpn>
  11.     <cpn></cpn>
  12.     <h1>{{msg}}</h1>
  13. </div>
  14. <template id="mytemplate">
  15.     <div>
  16.         <h1>方法2:使用template标签方法,分离组件中的模板!</h1>
  17.         <h1>{{msg}}</h1>
  18.     </div>
  19. </template>
  20. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21. <script>
  22. // 1.注册一个全局组件,取个名字,后面跟个对象即可创建.
  23.     Vue.component('cpn',{
  24.         // 2.分离模板要对应模板中的id(#mytemplate)
  25.         template:'#mytemplate',
  26.         // 这里必需是一个函数,同时返回是一个对象.
  27.         data(){
  28.             return {
  29.                 msg: '组件中的msg数据'
  30.             }
  31.         }
  32.     })
  33.     const app = new Vue({
  34.         el: '#app',
  35.         data: {
  36.             msg: '实例中的msg数据'
  37.         }
  38.     })
  39. </script>
  40. </body>
  41. </html>

组件中的data必需是一个函数

 加减实例(组件内数据data为什么是一个函数实例说明)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <!--4.使用组件,重复使用不相互影响-->
  10.     <cpn></cpn>
  11.     <cpn></cpn>
  12. </div>
  13. <template id="mytemplate">
  14.     <div>
  15.         <h1>当前计数:{{counter}}</h1>
  16.         <button @click="zj">增加+</button>
  17.         <button @click="js">减少-</button>
  18.     </div>
  19. </template>
  20. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21. <script>
  22. // 1.注册一个全局组件,取个名字,后面跟个对象即可创建.
  23.     Vue.component('cpn',{
  24.         // 2.分离模板要对应模板中的id(#mytemplate)
  25.         template:'#mytemplate',
  26.         // 这里必需是一个函数,同时返回是一个对象,这样重复使用就不相互影响.
  27.         data(){
  28.             return {
  29.                 msg: '组件中的msg数据',
  30.                 counter: 0
  31.             }
  32.         },
  33.         methods:{
  34.             zj(){this.counter++},
  35.             js(){this.counter--}
  36.         },
  37.     })
  38.     const app = new Vue({
  39.         el: '#app',
  40.         data: {
  41.             msg: '实例中的msg数据'
  42.         }
  43.     })
  44. </script>
  45. </body>
  46. </html>

加减实例

6.父子组件 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 4.使用组件 -->
  10.     <fzjm></fzjm>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  13. <script>
  14.     // 1. 创建组件模版(子组件)
  15.     const zzjm = Vue.extend({
  16.         template: `<div><h2>组件内容1-子组件名zzjm</h2></div>`
  17.     })
  18.  
  19.     // 2. 创建组件模版(父组件,将子组件放到父组件中)
  20.     const fzjm = Vue.extend({
  21.         template: `
  22.             <div>
  23.                 <h2>组件内容2-父组件名fzjm</h2>
  24.                 <!--// 在父组件中使用子组件-->
  25.                 <zzjm></zzjm>
  26.             </div>
  27.             `,
  28.         components: {
  29.             zzjm: zzjm,
  30.         }
  31.     })
  32.     // root根组件
  33.     const app = new Vue({
  34.         el: '#app', //挂载管理元素
  35.         data: {},
  36.         // 3.注册局部组件(标签名+组件名)
  37.         components: {
  38.             // 将父组件放到Vue实例root根组件中,没有在根组件中注册的组件不能直接使用(组件名1不能直接使用).
  39.             fzjm: fzjm,
  40.         }
  41.     })
  42. </script>
  43. </body>
  44. </html>
  45.  
  46. 父子组件一般方式

父子组件一般方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 4.使用组件 -->
  10.     <fzjm></fzjm>
  11. </div>
  12. <template id="zzjmb">
  13.     <div>
  14.         <h2>子组件在父组件中使用:使用template标签方法,分离组件中的模板!</h2>
  15.     </div>
  16. </template>
  17. <template id="fzjmb">
  18.     <div>
  19.         <h1>父组件</h1>
  20.         <!--// 在父组件中使用子组件-->
  21.         <zzjm></zzjm>
  22.     </div>
  23. </template>
  24. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  25. <script>
  26.     // 1. 创建组件模版(子组件)
  27.     const zzjm = Vue.extend({
  28.         template: '#zzjmb'
  29.     })
  30.     // 2. 创建组件模版(父组件,将子组件放到父组件中)
  31.     const fzjm = Vue.extend({
  32.         template: '#fzjmb',
  33.         components: {
  34.             zzjm: zzjm,
  35.         }
  36.     })
  37.     // root根组件
  38.     const app = new Vue({
  39.         el: '#app', //挂载管理元素
  40.         data: {},
  41.         // 3.注册局部组件(标签名+组件名)
  42.         components: {
  43.             // 将父组件放到Vue实例root根组件中,没有在根组件中注册的组件不能直接使用(组件名1不能直接使用).
  44.             fzjm: fzjm,
  45.         }
  46.     })
  47. </script>
  48. </body>
  49. </html>
  50.  
  51. 父子组件模版分离方式

父子组件模版分离方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 4.使用子组件 -->
  10.     <zzjm></zzjm>
  11. </div>
  12. <!--3.子组件模板-->
  13. <template id="zzjmb">
  14.     <div>
  15.         <h2>常用子组件在根组件(父组件)中使用</h2>
  16.     </div>
  17. </template>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script>
  20.     // root根组件(父组件,开发中一般是这种写法)
  21.     const app = new Vue({
  22.         el: '#app', //挂载管理元素
  23.         data: {},
  24.         // 1-2.创建注册局部组件(语法糖方式)
  25.         components: {
  26.             'zzjm': {
  27.                 template: '#zzjmb'
  28.             }
  29.         }
  30.     })
  31. </script>
  32. </body>
  33. </html>
  34.  
  35. 父子组件在根组件中使用(常用)

父子组件在根组件中使用(常用)

7.组件模板中的数据,不能直接在根组件中显示

  1. <body>
  2.     <div id="app">
  3.         <!-- 4.使用组件 -->
  4.         <zjm2></zjm2>
  5.         <!-- 不能直接用组件2中的数据的,同时要报错! -->
  6.         {{title}}
  7.     </div>
  8.     <template id="zjm2">
  9.         <div>
  10.             <h2> 组件2内容</h2>
  11.             <h2> {{title}}</h2>
  12.         </div>
  13.     </template>
  14.     <script>
  15.         // root根组件
  16.         const app = new Vue({
  17.             el: '#app', //挂载管理元素
  18.             data: {},
  19.             // 1-2.创建注册局部组件(语法糖方式)
  20.             components: {
  21.                 zjm2: {
  22.                     template: '#zjm2',
  23.                     data() {
  24.                         return {
  25.                             title: '组件2中的数据'
  26.                         }
  27.  
  28.                     }
  29.                 }
  30.             }
  31.         })
  32.     </script>
  33. </body>

组件模板中的数据

8.父子组件的通信(数据的传递)

A:父传子: props

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 5.绑定父子组件中的值,绑定后子组件中就可以使用父组件中的数据了,===> 7.展示子组件中数据 -->
  10.     <zzj1 v-bind:users1='users' v-bind:msg1='msg'> </zzj1>
  11. </div>
  12. <!-- 3.子组件模版 -->
  13. <template id="zzjmb">
  14.     <div>
  15.         <!-- 6.在子组件中使用父组件的值users和msg,必需用子组件中的变量users1和msg1 -->
  16.         <h2>props父组件中的值:{{users1}}</h2>
  17.         <h2>props父组件中的值:{{msg1}}</h2>
  18.         <h2>props父组件中的值:循环对象中的值</h2>
  19.         <ul>
  20.             <li v-for='item in users1'>{{item}}</li>
  21.         </ul>
  22.         <!--子组件data中的数据-->
  23.         <h2>{{title}}</h2>
  24.     </div>
  25. </template>
  26. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  27. <script>
  28.     // root根组件(父组件)
  29.     const app = new Vue({
  30.         el: '#app',
  31.         // 将下面data中数据传给子组件展示
  32.         data: {
  33.             msg:'长安镖局',
  34.             users: ['特朗普1', '特朗普2', '特朗普3', '特朗普4', '特朗普5', '特朗普6', ]
  35.         },
  36.         // 1-2.创建注册局部组件(语法糖方式)
  37.         components: {
  38.             zzj1: {
  39.                 template: '#zzjmb',
  40.                 data() {return {title: '子组件data中的数据'}
  41.                 },
  42.                 // 4.设置绑定父组件中的变量名users1,msg1
  43.                 // 方法一:数组的写法,很少用.
  44.                 props: ['users1', 'msg1']
  45.             }
  46.         }
  47.     })
  48. </script>
  49. </body>
  50. </html>
  51.  
  52. 数组写法(很少用)

数组写法(很少用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 5.绑定父子组件中的值,绑定后子组件中就可以使用父组件中的数据了,===> 7.展示子组件中数据 -->
  10.     <zzj1 v-bind:users1='users' v-bind:msg1='msg'> </zzj1>
  11. </div>
  12. <!-- 3.子组件模版 -->
  13. <template id="zzjmb">
  14.     <div>
  15.         <!-- 6.在子组件中使用父组件的值users和msg,必需用子组件中的变量users1和msg1 -->
  16.         <h2>props父组件中的值:{{users1}}</h2>
  17.         <h2>props父组件中的值:{{msg1}}</h2>
  18.         <h2>props父组件中的值:循环对象中的值</h2>
  19.         <ul>
  20.             <li v-for='item in users1'>{{item}}</li>
  21.         </ul>
  22.         <!--子组件data中的数据-->
  23.         <h2>{{title}}</h2>
  24.     </div>
  25. </template>
  26. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  27. <script>
  28.     // root根组件(父组件)
  29.     const app = new Vue({
  30.         el: '#app',
  31.         // 将下面data中数据传给子组件展示
  32.         data: {
  33.             msg:'长安镖局',
  34.             users: ['特朗普1', '特朗普2', '特朗普3', '特朗普4', '特朗普5', '特朗普6', ]
  35.         },
  36.         // 1-2.创建注册局部组件(语法糖方式)
  37.         components: {
  38.             zzj1: {
  39.                 template: '#zzjmb',
  40.                 data() {return {title: '子组件data中的数据'}
  41.                 },
  42.                 // 4.设置绑定父组件中的变量名users1,msg1
  43.                 // 方法一:数组的写法,很少用.
  44.                 // props: ['users1', 'msg1']
  45.                 // 方法二:对象的写法
  46.                 props: {
  47.                     users1: Array, //Array数组类型,String字符型,还可以指定验证要求,设置默认值,变量名不能写骆峰格式,不然上面展示时要转换格式才能绑定.
  48.                     msg1:Array
  49.                 }
  50.             }
  51.         }
  52.     })
  53. </script>
  54. </body>
  55. </html>
  56. 对象写法(常用)

对象写法(常用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 5.绑定父子组件中的值,绑定后子组件中就可以使用父组件中的数据了,===> 7.展示子组件中数据 -->
  10.     <zzj1 v-bind:msg1='msg' v-bind:users1='users'> </zzj1>
  11. </div>
  12. <!-- 3.子组件模版 -->
  13. <template id="zzjmb">
  14.     <div>
  15.         <!-- 6.在子组件中使用父组件的值users和msg,必需用子组件中的变量users1和msg1 -->
  16.         <h2>props父组件中的值:{{users1}},{{msg1}}</h2>
  17.         <h2>props父组件中的值:循环显示对象中的值</h2>
  18.         <ul><li v-for='item in users1'>{{item}}</li></ul>
  19.         <!--子组件data中的数据-->
  20.         <h2>{{title}}</h2>
  21.     </div>
  22. </template>
  23. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24. <script>
  25.     const app = new Vue({
  26.         el: '#app',
  27.         // 将下面data中数据传给子组件展示
  28.         data: {
  29.             users: ['特朗普1', '特朗普2', '特朗普3', '特朗普4', '特朗普5', '特朗普6', ],
  30.             msg:'长安镖局'
  31.         },
  32.         // 1-2.创建注册局部组件(语法糖方式)
  33.         components: {
  34.             zzj1: {
  35.                 template: '#zzjmb',
  36.                 data() {return {title: '子组件data中的数据'}
  37.                 },
  38.                 // 4.设置绑定父组件中的变量名users1,msg1
  39.                 // 方法一:数组的写法,很少用,里面是一个变量名.
  40.                 // props: ['users1', 'msg1']
  41.                 // 方法二:对象的写法,设置变量名同时设定他的类型.
  42.                 // 变量名为users1: 变量名类型为数组Array, 变量名为msg1: 变量名类型为字符型String.
  43.                 // props: {
  44.                 //     users1: Array,  // 变量名不能写骆峰格式,不然上面展示时要转换格式才能绑定.
  45.                 //     msg1:String
  46.                 // }
  47.                 props: {
  48.                     users1: Array,  // 变量名不能写骆峰格式,不然上面展示时要转换格式才能绑定.
  49.                     msg1: {
  50.                         type:String,
  51.                         default:'我是长安镖局!'  // 如果前面没有传值就显示默认的值
  52.                     },
  53.                     // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  54.                     // propA: Number,
  55.                     // 多个可能的类型
  56.                     // propB: [String, Number],
  57.                     // 必填的字符串
  58.                     // propC: {
  59.                     //     type: String,
  60.                     //     required: true
  61.                     // },
  62.                     // 带有默认值的数字
  63.                     // propD: {
  64.                     //     type: Number,
  65.                     //     default: 100
  66.                     // },
  67.                     // 带有默认值的对象
  68.                     // propE: {
  69.                     //     type: Object,
  70.                         // 对象或数组默认值必须从一个工厂函数获取
  71.                     //     default: function () {
  72.                     //         return { message: 'hello' }
  73.                     //     }
  74.                     // },
  75.                     // 自定义验证函数
  76.                     // propF: {
  77.                     //     validator: function (value) {
  78.                     //         // 这个值必须匹配下列字符串中的一个
  79.                     //         return ['success', 'warning', 'danger'].indexOf(value) !== -1
  80.                     //     }
  81.                     // }
  82.                     }
  83.             }
  84.         }
  85.     })
  86. </script>
  87. </body>
  88. </html>
  89.  
  90. 对象写法prop验证类型说明

对象写法prop验证类型说明

A:子传父(自定义事件)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!-- 父组件模版 -->
  9. <div id="app">
  10.     <!-- 6.将子组件传递的事件绑定到父组件中,默认自带子组件的参数值 -->
  11.     <zzj1 @zzjjiajia='fjiajia'></zzj1>
  12.     <!-- 8.展示数据-->
  13.     点击次数:{{total}}
  14. </div>
  15. <!-- 3.子组件模版 -->
  16. <template id="zzjmb">
  17.     <div>
  18.         <!-- 4.子组件绑定事件 -->
  19.         <button @click='jiajia'>+1</button>
  20.     </div>
  21. </template>
  22. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  23. <script>
  24.     // root根组件(父组件)
  25.     const app = new Vue({
  26.         el: '#app', //挂载管理元素
  27.         data: {total: 0},
  28.         // 1-2.创建注册局部组件(语法糖方式)
  29.         components: {
  30.             'zzj1':{
  31.                 template: '#zzjmb',
  32.                 data() {return {num: 0}},
  33.                 methods: {
  34.                     jiajia() {
  35.                         this.num++;
  36.                         // 5.用$emit方法,发射绑定事件和值
  37.                         this.$emit('zzjjiajia', this.num)  // 发射出的事件名称,自已取名,发射的值this.num.
  38.                     }
  39.                 },
  40.             }
  41.         },
  42.         methods: {
  43.             // 7.在父组件中处理子组件传递的事件
  44.             fjiajia(num) {
  45.                 this.total = num  // 将子组件中的num赋值给total
  46.             }
  47.         }
  48.     })
  49. </script>
  50. </body>
  51. </html>
  52.  
  53. 子传父加加例子

子传父加加例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">  <!--父组件模版-->
  9.     <!-- 5.监听子组件item-click发射的事件,自定义接收事件名称(zzjitemclick),这里默认把值item传了过来-->
  10.     <zzj @item-click='zzjitemclick'></zzj>
  11. </div>
  12. <template id="zzjmb">  <!--子组件模版 -->
  13.     <div>
  14.         <!--3.绑定点击事件和要传的值(item),自定义事件名称(btnclick),循环分类(fenlei)展示数据-->
  15.         <button v-for="item in fenlei" @click='btnclick(item)'>{{item.name}}</button>
  16.     </div>
  17. </template>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script>
  20.     const app = new Vue({
  21.         el: '#app',
  22.         data: {},
  23.         // 6.在父组件中使用子组件事件和值,这里item和msg都是形参,按传入的位置取值.
  24.         methods: {
  25.             zzjitemclick(item, msg) {
  26.                 console.log(item, msg);
  27.             },
  28.         },
  29.         // 1-2.创建注册局部组件(组件名+对象)
  30.         components: {
  31.             'zzj': {
  32.                 template: '#zzjmb',  // 子组件模版id
  33.                 data() {
  34.                     return {
  35.                         fenlei: [
  36.                             {id: 1, name: '企业用户信息'},
  37.                             {id: 2, name: '业务基础信息'}
  38.                         ],
  39.                         msg: '长安镖局',
  40.                     }
  41.                 },
  42.                 methods: {
  43.                     btnclick(item) {
  44.                         // 4.用$emit方法发射点击事件和值,自定义发射事件的名称(item-click).
  45.                         this.$emit('item-click', item, this.msg)  // 传模版中的数据不能写成this.item,传data中的数据就要加this
  46.                     }
  47.                 }
  48.             }
  49.         }
  50.     })
  51. </script>
  52. </body>
  53. </html>
  54.  
  55. 子传父分类例子

子传父分类例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--父组件模板-->
  9. <div id="app">
  10.     <!-- 3.绑定子父组件中值的变量(zusers对应父的users,msg对应zmsg),子组件就可以使用父组件中的数据了,===> 5.展示子组件中数据 -->
  11.     <!-- 8.子传父:3.监听子组件item-click发射的事件,定义一个父组件中使用的事件名zzjitemclick,这里默认把值item传了过来-->
  12.     <zzj v-bind:zusers='users' v-bind:zmsg='msg' @item-click='zzjitemclick'></zzj>
  13. </div>
  14. <!--子组件模版 -->
  15. <template id="zzjmb">
  16.     <div>
  17.         <!-- 4.在子组件中使用父组件的值users和msg,必需用子组件中自定义的变量zusers和zmsg-->
  18.         <!-- 6.子传父:1.将点击事件和值传给父组件,绑定子组件中点击事件@click和item值-->
  19.         <button v-for='item in zusers' @click='btnclick(item,zmsg)'>{{item.name}}</button>
  20.         <h2>父组件中的数据:{{zmsg}}</h2>
  21.     </div>
  22. </template>
  23. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24. <script>
  25.     const app = new Vue({
  26.         el: '#app',
  27.         // 将下面data中数据传给子组件展示
  28.         data: {
  29.             users: [
  30.                 {id: 1, name: '企业用户信息'},
  31.                 {id: 2, name: '业务基础信息'} ],
  32.             msg:'长安镖局'
  33.         },
  34.         // 9.子传父:4.在父组件中使用子组件事件和值,这里item和title都是形参,按传入的位置取值.
  35.         methods: {
  36.             zzjitemclick(item,zmsg,title){
  37.                 console.log(item,zmsg,title);
  38.             },
  39.         },
  40.         // 1.创建注册局部子组件(组件名+对象)
  41.         components: {
  42.             zzj: {
  43.                 template: '#zzjmb',  //子组件模版id
  44.                 data() {
  45.                     return {
  46.                         title: '子组件data中的数据',
  47.                     }
  48.                 },
  49.                 // 2.设置父组件中值对应子组件中的变量名,自定义子数据变量名zusers对应父的users,msg对应zmsg.
  50.                 props: {
  51.                     zusers: Array,  // 变量名不能写骆峰格式,不然上面展示时要转换格式才能绑定.
  52.                     zmsg: {
  53.                         type: String,
  54.                         default: '我是长安镖局!'  // 如果前面没有传值就显示默认的值
  55.                     }
  56.                 },
  57.                 methods: {
  58.                     btnclick(item,zmsg) {
  59.                         // console.log(item);
  60.                         // 7.子传父:2.用$emit方法,发射点击绑定事件和值,传模版中的数据不加this,传data中的数据就要加this.
  61.                         this.$emit('item-click',item, zmsg,this.title) //自定义发射的事件名称item-click
  62.                     }
  63.                 }
  64.             }
  65.         }
  66.     })
  67. </script>
  68. </body>
  69. </html>
  70.  
  71. 父传子再传父分类例子

父传子再传父分类例子

9.父子组件的访问方式($children)

A:父组件访问子组件:使用$children或$refs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--父组件模版-->
  9. <div id="app">
  10.     <zzj1></zzj1>  <!--使用子组件1-->
  11.     <zzj1></zzj1>  <!--使用子组件2-->
  12.     <button @click="btnclick">按钮</button>
  13. </div>
  14. <!--子组件模版-->
  15. <template id="zzjmb">
  16.     <div><h2>子组件data中的数据:{{title}}</h2></div>
  17. </template>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script>
  20.     const app = new Vue({
  21.         el: '#app',
  22.         data: {},
  23.         methods:{
  24.             btnclick(){
  25.                 console.log(this.$children)
  26.                 // 在父组件中执行子组件1中的方法,
  27.                 this.$children[0].showmsg()
  28.                 // 在父组件中执行子组件2中的方法,
  29.                 this.$children[1].showmsg()
  30.             }
  31.         },
  32.         // 1.创建注册局部组件(组件名+对象)
  33.         components: {
  34.             zzj1: {
  35.                 template: '#zzjmb',
  36.                 data() {return {title: '子组件data中的数据'}
  37.                 },
  38.                 methods: {
  39.                     // 子组件里的方法
  40.                     showmsg(){
  41.                         console.log('我是子组件里的方法')
  42.                     }
  43.                 }
  44.             }
  45.         }
  46.     })
  47. </script>
  48. </body>
  49. </html>
  50.  
  51. 父访问子($children)不常用

父访问子($children)不常用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--父组件模版-->
  9. <div id="app">
  10.     <zzj1 ref="ref1"></zzj1>  <!--使用子组件1,加一个属性-->
  11.     <zzj1 ref="ref2"></zzj1>  <!--使用子组件2,加一个属性-->
  12.     <button @click="btnclick">按钮</button>
  13. </div>
  14. <!--子组件模版-->
  15. <template id="zzjmb">
  16.     <div><h2>子组件data中的数据:{{title}}</h2></div>
  17. </template>
  18. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  19. <script>
  20.     const app = new Vue({
  21.         el: '#app',
  22.         data: {},
  23.         methods:{
  24.             btnclick(){
  25.                 // $refs对象类型,默认空
  26.                 console.log(this.$refs)
  27.                 // 在父组件中执行子组件1中的方法,
  28.                 this.$refs.ref1.showmsg()
  29.                 // 在父组件中执行子组件2中的方法,
  30.                 this.$refs.ref2.showmsg()
  31.             }
  32.         },
  33.         // 1.创建注册局部组件(组件名+对象)
  34.         components: {
  35.             zzj1: {
  36.                 template: '#zzjmb',
  37.                 data() {return {title: '子组件data中的数据'}
  38.                 },
  39.                 methods: {
  40.                     // 子组件里的方法
  41.                     showmsg(){
  42.                         console.log('我是子组件里的方法')
  43.                     }
  44.                 }
  45.             }
  46.         }
  47.     })
  48. </script>
  49. </body>
  50. </html>
  51. 父访问子($refs)常用

父访问子($refs)常用

B:子组件访问父组件:使用$parent和$root 实际开发中不建义用.

Vue学习笔记-Vue.js-2.X 学习(三)

Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发的更多相关文章

  1. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  2. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  3. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  6. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  9. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

随机推荐

  1. 小白搭建WAMP详细教程---mysql安装与设置

    MySQL分为安装版和解压版.为了以后MySQL出问题想重装时会出现各种不必要的麻烦,我们这里选择解压版MySQL.详细步骤如下: 一:Mysql官网下载Mysql解压版 到官网下载,网址为:http ...

  2. MySQL常用SQL语句1

    -- 创建表 CREATE TABLE USER ( -- id默认每个表都该拥有(非空 不重复) -- (id是每一行的唯一标识) -- 其他字段可能会重复,我们无法依赖其他的字段去确定某一行记录 ...

  3. UDP发送文件

    接收端 package com.zy.demo2; import java.io.File; import java.io.FileOutputStream; import java.net.Data ...

  4. D - Wireless Network(无线网络)

    题意:给你 N 台坏了的电脑的坐标 ,和一个距离范围 d . (在距离范围内的电脑可以相互通信,每台电脑也可以连接两台不同的电脑,使他们之间能够通信) 输入任意次数操作: O   x        表 ...

  5. AtCoder Beginner Contest 168

    比赛链接:https://atcoder.jp/contests/abc168/tasks A - ∴ (Therefore) 题意 给出一个由数字组成的字符串 $s$,要求如下: 如果 $s$ 以 ...

  6. hdu5391 Zball in Tina Town

    Problem Description Tina Town is a friendly place. People there care about each other. Tina has a ba ...

  7. Codeforces Round #647 (Div. 2) - Thanks, Algo Muse! C. Johnny and Another Rating Drop (规律,二进制)

    题意:有一个正整数\(n\),要求写出所有\(1\)~\(n\)的二进制数,统计相邻的两个二进制同位置上不同数的个数. 题解:打表找规律,不难发现: ​ \(00000\) ​ \(00001\) ​ ...

  8. Keywords Search HDU - 2222 AC自动机板子题

    In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiskey al ...

  9. 1、Django框架目录介绍

    1.windows上安装django pip install django==1.10.3 安装完成后:django-admin.exe 默认存放路径:C:\Users\licl11092\AppDa ...

  10. Linux-字符处理命令

    目录 1.sort(排序) 2.uniq(不相邻的两行重复不会去除) 3.cut(取列,截取字段) 4.wc(统计行.单词.字符数) 1.sort(排序) 选项: -t # 指定分隔符 -k # 指定 ...