树结构

  1. 创建组件构造对象

  2. 注册组件

  3. 全局组件和局部组件

  4. 可以在构造器当中,除了模版 template 属性,还可以添加 components 属性 这样就形成了父子组件
    在构造器中添加了components 属性后可以注册外面的组件,并自已调用

组件通信父向子传递消息

首先会在Vue实列中把数据给到v-bind, 再从这里传给注册组件 里的cpn ,cpn此时收到数据并返回给模版
image.png

组件通信子向父传递消息

开始时我们先来用之前的父组件向子组件传递数据的知识完成下面这个问题
1. 父组件如何向子组件传递一个方法呢？
总结来说就一句话: 通过事件绑定机制，将父组件上的方法传递给子组件

我们需要用到的东西

  1. vue实例，并在实例上定义一个方法
    2. 创建子组件
  1. // 1
  2. var vm = new Vue({
  3.   el : "#app",
  4.   methods: {
  5.     show(){
  6.       console.log(’我是父组件上的方法‘);
  8.     },
  9.   })   
  11. // 2
  12.   <template id="tem">
  13.   <div>
  14.   <h3>我是子组件</h3>
  15.   // 点击button按钮，通过$emit实例api自定义方法
  16.   <button @click="button">触发父组件传递过来的方法</button>
  17.   </div>
  18.   </template>
  20.   Vue.component('tem-app',{
  21.   template : '#tem',
  22.   methods: {
  23.     button(){
  24.       // vm.$emit( eventName, […args] ) : 
  25.       // 触发当前实例上的事件
  26.       // 参数一，实例[父组件]定义的方法【事件名称】
  27.       // 参数二，可选的，子组件向父组件传递的数据，可以是多个，
  28.       this.$emit('func')
  29.     }
  30.     }
  31. })
  33. // 3  ok ,再来看看我们vue实例所要控制的区域
  34. // 父组件通过绑定了一个由子组件定义的方法，将自己身上的方法传递过去
  35. <div id="app">
  36.     <tem-app @func="show"></tem-app>
  37. </div>
  39. // 这样我们就完成了，父组件向子组件传递一个方法的问题了

我通过上面的例子再来看看
1.如何往父组件传递数据?
1.这其实很简单
2.通过 $meit方法的第二个参数，将数据传递过去，父组件方法接收子组件传递过来的数据即可

  1. var obj = {
  2.   name : "张三",
  3.   age : 18,
  4.   sex : "男"
  5. }// vue实例var vm = new Vue({
  6. el : "#app",
  7.   methods: {
  8.     show(obj){
  9.       // 父组件拿到子组件传递过来的数据
  10.       console.log(obj)
  11.     }
  12.   },
  13. })

完整代码

  2. <body>
  5.     <!-- 
  6.         通过事件绑定机制，将父组件上的方法传递给子组件,
  7.         子组件通过第二的参数将数据传递给父组件
  8.      -->
  9.     <div id="app">
  11.         <tem-app @func="show"></tem-app>
  13.     </div>
  15.     <template id="tem">
  16.         <div>
  17.             <h3>我是子组件</h3>
  18.             <button @click="button">触发父组件传递过来的方法</button>
  19.         </div>
  20.     </template>
  23.     <script>
  26.         var obj = {
  27.             name : '张三',
  28.             age : 12,
  29.             sex : '男'
  30.         }
  32.         Vue.component('tem-app',{
  33.             template : '#tem',
  34.             data : function(){
  35.                 return {
  36.                     msg : '我是子组件上的数据'
  37.                 }
  38.             },
  39.             methods: {
  40.                 button(){
  42.                     // vm.$emit( eventName, […args] ) : 
  43.                     // 触发当前实例上的事件
  44.                     // 参数一，实例[父组件]定义的方法
  45.                     // 参数二，可选的，子组件向父组件传递的数据，可以是多个，
  46.                     this.$emit('func',obj)
  47.                 }
  48.             },
  49.         })
  51.         var vm = new Vue({
  52.             el : "#app",
  53.             methods: {
  54.                 show(obj){
  55.                     // 父组件拿到子组件传递过来的数据
  56.                     console.log(obj)
  57.                 }
  58.             },
  59.         })    
  61.     </script>
  62.     </body>

组件通信监听子组件点击事件

@click=”$emit(‘back’)” 子组件点击事件
:back=”xiangyin” 父组件监听

子组件调用父组件方法

首先子组件中有监听事件,比如点击事件 @click=”Btn”

  1. Btn:funtions(){
  2.   this.$parent.父组件的方法名() ;
  3. }

父组件调用子组件方法

首先在父组件中设置事件监听, @click=”Btn”

  1. Btn:funtions(){
  2.   this.$refs.child.childFn() ;  //调用了子组件名称
  3. }

子组件

  1. childFn:funtions(){
  3. }

组件化高级

Slot插槽扩展

  1. 插槽的基本使用 放到templase 模版标签里
    2. 插槽的默认值 按钮
    3. 如果有多个值,同时放到插槽里

Slot具名插槽

有多个插槽,给指定的插槽替换
给插槽定义名字,相当于一个身份id

  1. <body>
  2.   <div id="app">
  4.     <cpm>
  5.     <span slot="left"> 左边的插槽改变了  </span>
  6. </cpm>
  8. </div>
  9. <template id='cpm'>
  10.   <div>
  11.   <h2>我是组件</h2>
  12. <slot name='left'><span>左边</span></slot><br>
  13.   <slot name='center'><span>中间</span></slot><br>
  14.     <slot name='right'><span>右边</span></slot><br>
  15.       </div>
  16. </template>

编译作用域

在父级的变量,只对父级有效果
在子级的变量,只对子级有次效果

插槽作用域

数据是从子组件来的, 所以遍历循环数据也因改在模版中循环,并 在slot标签中自定义属性,绑定shuju
然后再父组件中的标签使用 slot-scope 属性来对接,然后展示数据

  1. <body>
  2.   <!-- 目标:  从子组件中获取数据 显示到父组件 -->
  3.   <div id="app">
  4.     <cpm>
  5.     <template slot-scope='slot'>
  6.       <!-- <span v-for='item in slot.data2'>{{item}}-</span> -->
  7.       <span>{{slot.data2.join("-")}}</span>
  8. </template>
  9. </cpm>
  11. <cpm>
  12.         <div slot-scope='slot'>
  13.           <span>{{slot.data2.join(" * ")}}</span>
  14. </div>
  15. </cpm>
  16. </div>
  17. <template id='cpm'>
  18.   <div>
  19.   <slot :data2='shuju'>
  20.     <h2 v-for='item in shuju'>{{item}}</h2>
  21. </slot>
  22. </div>
  23. </template>
  24. <script>
  25.       const app = new Vue({
  26.         el: '#app',
  27.         data: {
  28.           message: '你好世界',
  29.           ishow: true
  30.         },
  31.         components: {
  32.           cpm: {
  33.             template: '#cpm',
  34.             data() {
  35.               return {
  36.                 shuju: ['网络验证', '自动发卡', 'QQ计数器', "微信计数器"]
  37.               }
  38.             }
  39.           }
  40.         }
  41.       })
  42. </script>
  43. </body>