全局组件 & 局部组件

[ 组件作用 ]

  • 可以复用，提高开发效率
  • 方便后期维护和修改
  • 减少渲染

全局组件

  1. <body>
  2.     <div id="app">
  3.         <!-- 在 dom 中只支持 - 连接 -->
  4.         <my-button></my-button>
  5.     </div>
  7.     <!-- 组件内容 -->
  8.     <template id="button">
  9.         <div> 111 </div>
  10.     </template>
  12. </body>
  14. </html>
  15. <script src="vue.min.js"></script>
  16. <script>
  17.     //  全局组件
  18.     Vue.component('my-button', {
  19.         // template: '<div> 1111 </div', // 所有组件
  20.         template: '#button',  // 查找相应组件内容
  21.         data() { // 组件中的data 是一个函数 返回一个对象
  22.             return {
  23.                 msg: 'aaa',
  24.             }
  25.         }    
  26.     })
  28.     let vm = new Vue({
  29.         // template: '<div> 111 </div', 
  30.         el: '#app',
  31.         data: {},
  33.     })
  35. </script>

局部组件

  1. <body>
  2.     <div id="app">
  3.         <!--3. 使用组件; 在 dom 中只支持 - 连接 -->
  4.         <my-button>
  5.             <hello></hello>
  6.         </my-button>
  8.         <!-- <hello></hello> -->
  9.     </div>
  10.     <!-- 组件内容 -->
  11.     <template id="button">
  12.         <div> {{ msg }}</div>
  13.     </template>
  14.     <template id="hello">
  15.         <div> {{ hel }} </div>
  16.     </template>
  17. </body>
  19. </html>
  20. <script src="vue.min.js"></script>
  21. <script>
  23.     /**
  24.      *  1. 定义组件
  25.      *  2. 注册组件
  26.      *  3. 使用组件 
  27.      * 
  28.      */
  29.     let hello  = {
  30.         template: '#hello',
  31.         data() {
  32.             return {
  33.                 hel: 'hello'
  34.             }
  35.         }
  36.     }
  37.     //  1. 定义组件 
  38.     let myButton = {
  39.         // template: '<div> 1111 </div', // 所有组件
  40.         template: '#button',  // 查找相应组件内容
  41.         data() { // 组件中的data 是一个函数 返回一个对象
  42.             return {
  43.                 msg: 'aaa',
  44.             }
  45.         },
  47.         // myButton 的子组件 hello
  48.         components: {
  49.             // 在 myButton 中注册子组件 hello
  50.             hello
  51.         }
  52.     }
  53.     let vm = new Vue({
  54.         // template: '<div> 111 </div', 
  55.         el: '#app',
  56.         data: {},
  57.         components: {
  58.             // 2. 注册组件
  59.                myButton,  // myButton:myButton 
  60.             //    hello
  61.         }   
  62.     })
  63. </script>

组件间通信

[ 安装 ]

  • 项目开发: npm install -g @vue/cli
  • 快速原型开发（对单个 *.vue 文件开发）: npm install -g @vue/cli-service-global

[ 运行 ]

  • 开发环境: vue serve App.vue
  • 生产环境: vue build App.vue

父组件传数据到子组件 : 子组件通过 props 接收

  1. <template>
  2.   <div>
  3.     Parent
  4.     <!-- 父组件穿数据到子组件 -->
  5.     <Son :money='money'></Son>
  6.   </div>
  7. </template>
  8. <script>
  9.   import Son from './Son';
  10. export default {
  12.     data() {
  13.         return {
  14.             money: '400',
  15.         }
  16.     },
  17.     components: {
  18.         Son
  19.     }
  20. }
  21. </script>
  23. <template>
  24.   <div>
  25.     Son
  26.      {{ money }} 
  27.   </div>
  29. </template>
  30. <script>
  31. export default {
  33.     // props:['money']
  34.     // computed: { //计算属性
  35.     //     changeM() {
  36.     //         //  对传过来的值进行更改，变为小写
  37.     //         return this.money.thim().toLowerCase();
  38.     //     }
  39.     // },
  41.     // 对传过来的值进行验证
  42.     props: {
  43.         money: {
  44.             type:[String, Number],
  45.             // default: 100, 默认值
  46.             required: true, // 必须传
  47.             // 自定义验证规则
  48.             validator:(value)=> {
  49.                 return  value > 400 && value < 1000;
  50.             }
  51.         },
  53.         // 数组或对象 默认值得是函数
  54.         arr: {
  55.             type: Array ,
  56.             default: ()=> [1] //默认值 函数 返回一个数组
  57.         },
  58.         obj: {
  59.             type:Object,
  60.             default: ()=> ({}) //默认值 函数 返回一个对象
  61.         },
  62.     },
  63. }
  64. </script>

子组件传数据到父组件 : $emit(通过事件的方式，观察者模式)

  1. <template>
  2.   <div>
  3.     Parent
  6.     <!-- 父组件监视子组件的事件（子组件传数据到父组件）并且给事件绑定函数 -->
  7.     <!-- <Son @change="fn"></Son> -->
  9.     <!-- 语法糖写法 -->
  10.     <!-- <Son :money.sync="money"></Son> -->
  11.     <!-- 对应子组件 语法糖 写法 -->
  12.     <!-- this.$emit('update:money',1000) -->
  14.     <!-- 相当于 money 绑定在属性 value 并且绑定的事件名 @input -->
  15.     <Son v-model="money"></Son>
  17.     <!-- <Son
  18.       :value="money"
  19.       @input="(data)=>money=data"
  20.     ></Son> -->
  21.     <!-- 对应子组件写法 -->
  22.     <!-- 接受到的属性 ：{{ value }} -->
  23.     <!-- this.$emit('input', 1000) -->
  25.   </div>
  27. </template>
  28. <script>
  29.   import Son from './Son';
  30. export default {
  32.     data() {
  33.         return {
  34.             money: '400',
  35.         }
  36.     },
  37.     components: {
  38.         Son
  39.     },
  40.     methods: {
  41.         fn(data){ // data 子组件传回来的数据
  42.             this.money = data;
  43.         }
  45.     },
  46. }
  47. </script>
  49. <template>
  50.   <div>
  51.     Son
  52.     <button @click="give">传数据到父组件</button>
  53.   </div>
  55. </template>
  56. <script>
  57. // import grandSon from './grandSon';
  58. export default {
  59.     methods: {
  60.         // 子组件传数据到父组件
  61.         give() {
  62.             // 子组件执行父组件监听的事件
  63.             // this.$emit('change', 1000)
  64.             // 语法糖 写法
  65.             // this.$emit('update:money',1000)
  67.             this.$emit('input', 1000)
  69.         }
  70.     },
  71. }
  72. </script>

批量把属性传给后代组件（子组件或孙组件）: $attrs(v-bind=”$attrs”往下传)

  1. <Son :name ="1" :age= "2" @click="fn"></Son>
  3.     <!-- 直接一次性拿到父组件传的所有属性 -->
  4.       {{$attrs}}
  5.     <!-- 只传一个数据,此时 数据里面只剩下 age  -->
  6.     <GrandSon v-bind="$attrs" :name="$attrs.name"></GrandSon>
  8.     <script>
  9.        // GrandSon 组件中接收
  10.         export default {
  11.         props: ['name'],
  12.         }
  13.     </script>

批量把方法传给后代组件: $listeners(v-on=”$listeners”往下传)

  1. <!-- 父组件中绑定事件 -->
  2.     <Son :name ="1" :age= "2" @click="fn"></Son>
  4.     <!-- 子组件拿到父组件的事件 -->
  5.     <!-- {{ $listeners.click() }} -->
  6.     <GrandSon v-on="$listeners" ></GrandSon>
  7.     <!-- GrandSon 组件中直接调用 -->
  8.     {{ $listeners.click() }}

跨组件 provide inject

  1. <!-- 跨组件 -->
  2.     <script>
  3.         import Son from './Son'
  4.         export default {
  5.             // 全局定义
  6.             provide() {
  7.                 return {
  8.                 parentMsg: 'parent'
  9.                 }
  10.             },
  11.         }
  12.     </script>
  13.     <!-- grandSon 中通过 inject 注入， {{ parentMsg }}使用  -->
  14.     <script>
  15.         export default {
  16.             inject:['parentMsg']
  17.         }
  18.     </script>

$parent & $children & ref

  • 拿到父组件: $parent ;
  • 拿到所有子组件: $children (返回一个所有子组件的数组) ;
  • 通过 ref 获取
  1. <!-- $parent 拿到父组件; $children 拿到所有子组件 -->
  2.       <GrandSon  ref="GrandSon" ></GrandSon>
  4.     <script>
  5.        mounted() { // dom 加载完成的钩子函数
  6.             this.$parent // 拿到父组件
  7.             this.$children // 拿到所有的子组件，拿到的是一个数组
  9.             // 执行
  10.             this.$parent.fn();
  11.             this.$$children[0].fn2(); // 通过索引拿到第一个子组件 
  13.             // 通过 ref 
  14.             this.$refs.GrandSon.fn2()
  15.         }
  16.     </script>
  1. 兄弟间的通信 : eventBus; 通过 $on 和 $emit
  1. Vue.prototype.$bus = new Vue(); // 必须拥有公共的 vue 实例
  3.     this.$bus.$on('test',function(data){
  4.         console.log(data)
  5.     })
  6.     // 另一个兄弟组件传递数据
  7.      this.$bus.$emit('test',1000)