点击事件和v-if（v-show）的组合使用

  1. <template>
  2.   <div class="aBody">
  3.     <span class="title">我，子组件。</span>
  4.     <!-- 通过v-if或v-show的方式让标签消失出现 -->
  5.     <span class="info" v-show="isShow">{{title}}</span>
  6.     <span class="info" v-if="isShow">{{title}}</span>
  7.     <!-- 给btn添加点击事件 @ 是 v-on:  的语法糖-->
  8.     <button class="btn" @click="changeInfo">展示info</button>
  9.   </div>
  10. </template>
  12. <script>
  13. export default {
  14.   data(){
  15.     // 必须有返回值，且返回一个对象
  16.     // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取
  17.     return {
  18.       title:'',
  19.       isShow:false
  20.     }
  21.   },
  22.   methods:{
  23.     changeInfo:function() {
  24.       this.title = '啊被发现了吗!  ,,ԾㅂԾ,,';
  25.       // 点击后将isShow取反后的值赋值给他自己，
  26.       // 以实现通过点击然一个标签消失，出现
  27.       this.isShow = !this.isShow;
  28.     }
  29.   }
  31. }
  32. </script>
  34. <style>
  36. .btn {
  37.   width: 100px;
  38. }
  39. </style>

slot插槽

通过使用插槽可以在子组件中写入信息，如下：

  1. <JuniorSon @results = "accept" class="son" :index = 'infos' item = 'haha'>
  2.     <span>{{something}}</span>
  3.     <span v-show="isShow">son发来贺电：{{toBStr}}</span>
  4.     <button class="f-btn">点击发送信息给son</button>
  5. </JuniorSon>

在子组件中通过slot接收上面JuniorSon标签中的信息，否则JuniorSon标签中的信息就不会显示
slot所在位置就是JuniorSon标签中的信息所在位置

  1. <template>
  2.   <div class="aBody">
  3.     <!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 -->
  4.     <slot></slot>
  5.   </div>
  6. </template>

计算函数

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
通过计算函数，减少标签中的逻辑性代码
计算函数都放在computed中，并且计算函数不能使用箭头函数（除非你不使用this）
如下计算函数toBStr，在使用时直接使用函数名即可

  1. <JuniorSon @results = "accept" class="son" :index = 'infos' item = 'haha'>
  2.     <span>{{something}}</span>
  3.     <span v-show="isShow">son发来贺电：{{toBStr}}</span>
  4.     <button class="f-btn">点击发送信息给son</button>
  5. </JuniorSon>
  7. export default {
  8.   components:{
  9.     JuniorSon
  10.   },
  11.   data() {
  12.     return {
  13.       something:'我是你爸爸',
  14.       infos:'我是你爸爸，我有钱。哎╮（╯＿╰）╭',
  15.       // 存放son传递过来的数据
  16.       sonData:[],
  17.       isShow:false
  19.     }
  20.   },
  21.   methods:{
  22.     // 通过自定义事件接收juniorSon发送的信息
  23.     accept:function(event) {
  24.       // 打印信息
  25.       console.log(event,arguments)
  26.       // 将信息存入sonData
  27.       const list = Array.from(arguments);
  28.       list.forEach(item => {
  29.         this.sonData.push(item);
  30.       })
  31.       // 接收并显示信息
  32.       this.isShow = true
  33.     }
  34.   },
  35.   computed:{
  36.     toBStr:function(){
  37.       let str = '';
  38.       this.sonData.forEach(item => {
  39.         str += item + ' ';
  40.       })
  41.       return str;
  42.     }
  43.   }
  44. }

监听函数

监听函数一般放在watch中
函数名就是需要监听的变量名，
参数1—变化后的值
参数2—变化前的值

  1. watch:{
  2.     isShow:function(newData,oldData) {
  3.       console.log(newData,oldData);
  4.     }
  5.   }

组件的生命周期

生命周期函数

beforeCreate(){}
created(){}
beforeMount(){}
mounted(){}
beforeUpdate(){}
updated(){}
beforeDestroy(){}
destroyed(){}

生命周期的4个阶段

create
mount
update
destroy

生命周期函数的使用

  1. export default {
  2. beforeCreate(){
  3.     console.log('实例化前')
  4.   },
  5.   created(){
  6.     console.log('完成实例')
  7.   },
  8.   beforeMount(){
  9.     console.log('挂载前')
  10.   },
  11.   mounted(){
  12.     console.log('完成挂载') 
  13.   },
  14.   beforeUpdate(){
  15.     console.log('数据更新，视图未更新')
  16.   },
  17.   updated(){
  18.     console.log('数据更新，视图更新')
  19.   },
  20.   beforeDestroy(){
  21.     console.log('销毁前')
  22.   },
  23.   destroyed(){
  24.     console.log('销毁完成')
  25.   }}

双向绑定

v-model

通过向input中输入值，v-model将输入的值保存到message中，

  1. <div class="cla">{{message}}</div>
  2. <input type="text" v-model="message">

请求接口的时机

created(){}中请求接口
接口的请求是异步的(请求的时间不确定)，解决
1.默认值
2.loading
数据没有加载完就使用默认的数据（loading显示），加载完成后就使用真正的数据（loading隐藏）
数据没有加载完就只能看见loading的加载页面

父组件，子组件传值

父组件传值子组件

1.在父组件中先引入子组件，并注册。
2.然后就可以通过给组件JuniorSon设置动态绑定的属性，或静态属性，将数据传递给子组件

  1. <!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 -->
  2. <!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 -->
  3.   <JuniorSon @results = "accept" class="son" :index = 'infos' item = 'haha'>
  4.     <span>{{something}}</span>
  5.     <span v-show="isShow">son发来贺电：{{toBStr}}</span>
  6.     <button class="f-btn">点击发送信息给son</button>
  7.   </JuniorSon>

3.子组件通过props接收父组件传过来的信息
4.接收完毕后就可以使用了，用法和data中的变量一样

this.$props指向vue实例的props
this.props指向data中的props
this.$attrs可以获取到父组件传递过来的自定义属性的信息(如果没有在props中接收，那么就可以在attrs中找到未被接收的信息，如果props将数据全部接收那么，attrs中就没有可用的数据)
props有两种接收信息的方式

  1. props: ["index","item"]
  2. //通过数组接收信息，变量名就是前面的自定义属性名（不能改变）
  1. props:{
  2.     index:{
  3.       type:String,
  4.       required:true
  5.     },
  6.     item:{
  7.       type:String,
  8.       required:true
  9.     }
  10.   },
  11.     //通过对象接收信息,这样可以设置每一个变量的类型等。

子组件接收数据注意事项

子组件接受的父组件的值分为——引用类型和普通类型两种，
1.普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
2.引用类型：数组（Array）、对象（Object）

其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，
但是，引用类型的值，当在子组件中修改后，父组件的也会修改，
那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。
除非你有特殊的要求这么去做，否则最好不要这么做。

父组件传给子组件的值，在子组件中千万不能修改，因其数据是公用的，改了所有引用的子组件就都改了。

子组件传递数据给父组件

子组件通过this.$emit()将数据传给父组件

  1. // 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数
  2. // 参数2，3，4---传递参数
  3. this.$emit('results','你是个大帅逼','没错说的就是你','big SB',)

父组件通过JuniorSon上的自定义事件的事件处理函数，接收并处理数据

  1. <!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 -->
  2.   <JuniorSon @results = "accept" class="son" :index = 'infos' item = 'haha'>
  3.     <span>{{something}}</span>
  4.     <span v-show="isShow">son发来贺电：{{toBStr}}</span>
  5.     <button class="f-btn">点击发送信息给son</button>
  6.   </JuniorSon>

兄弟组件互传信息

其中一个兄弟组件将信息先传递给父组件，再通过父组件将信息传递给另有一个兄弟组件

父组件

  1. <template>
  2. <!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 -->
  3. <!-- 传递给子组件的信息不能是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 -->
  4.   <JuniorSon @results = "accept" class="son" :index = 'infos' item = 'haha'>
  5.     <span>{{something}}</span>
  6.     <span v-show="isShow">son发来贺电：{{toBStr}}</span>
  7.     <button class="f-btn">点击发送信息给son</button>
  8.   </JuniorSon>
  9. </template>
  10. <script>
  11. import JuniorSon from './JuniorSon.vue';
  14. export default {
  15.   components:{
  16.     JuniorSon
  17.   },
  18.   data() {
  19.     return {
  20.       something:'我是你爸爸',
  21.       infos:'我是你爸爸，我有钱。哎╮（╯＿╰）╭',
  22.       // 存放son传递过来的数据
  23.       sonData:[],
  24.       isShow:false
  26.     }
  27.   },
  28.   methods:{
  29.     // 通过自定义事件接收juniorSon发送的信息
  30.     accept:function(event) {
  31.       // 打印信息
  32.       console.log(event,arguments)
  33.       // 将信息存入sonData
  34.       const list = Array.from(arguments);
  35.       list.forEach(item => {
  36.         this.sonData.push(item);
  37.       })
  38.       // 接收并显示信息
  39.       this.isShow = true
  40.     }
  41.   },
  42.   computed:{
  43.     toBStr:function(){
  44.       let str = '';
  45.       this.sonData.forEach(item => {
  46.         str += item + ' ';
  47.       })
  48.       return str;
  49.     }
  50.   }
  51. }
  52. </script>
  54. <style>
  55. /* 设置组件的样式 */
  56. .son {
  57.   width: 100%;
  58.   display: flex;
  59.   flex-direction: column;
  60.   align-content: center;
  61.   justify-content: center;
  62. }
  63. span {
  64.   width: 200px;
  65. }
  67. .f-btn {
  68.   margin: 20px 0;
  69.   width: 200px;
  70. }
  71. </style>

子组件

  1. <template>
  2.   <div class="aBody">
  3.     <!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 -->
  4.     <slot></slot>
  5.     <span class="title">我，子组件。</span>
  6.     <!-- 通过v-if或v-show的方式让标签消失出现 -->
  7.     <!-- 前者是删除，后者是隐藏 -->
  8.     <span class="info" v-show="isShow">{{title}}</span>
  9.     <span class="info" v-if="isShow">father发来亲切的问候：{{index}}</span>
  10.     <!-- 给btn添加点击事件 @ 是 v-on:  的语法糖-->
  11.     <button class="btn" @click="changeInfo">展示info</button>
  13.     <button class="f-btn" @click="sendInfoToFather">点击发送信息给father</button>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   // 
  21.   // props: ["index","item"],
  22.   // 
  23.   props:{
  24.     index:{
  25.       type:String,
  26.       required:true
  27.     },
  28.     item:{
  29.       type:String,
  30.       required:true
  31.     }
  32.   },
  33.   data(){
  34.     // 必须有返回值，且返回一个对象
  35.     // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取
  36.     return {
  37.       title:'',
  38.       isShow:false
  39.     }
  40.   },
  41.   methods:{
  42.     changeInfo:function() {
  43.       this.title = '啊被发现了吗!  ,,ԾㅂԾ,,';
  44.       // 点击后将isShow取反后的值赋值给他自己，以实现通过点击然一个标签消失，出现
  45.       this.isShow = !this.isShow;
  47.       // 获取信息
  48.       console.log(this.$attrs)
  49.       console.log(this.$props)
  50.       console.log(this.index,this.item)
  51.     },
  53.     // 将信息发送给SeniorFather
  54.     sendInfoToFather: function() {
  55.       // 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数
  56.       // 参数2，3，4---传递参数
  57.       this.$emit('results','你是个大帅逼','没错说的就是你','big SB',)
  58.     }
  59.   }
  61. }
  62. </script>
  64. <style>
  66. .info ,.title {
  67.   width: 200px;
  68. }
  70. .btn {
  71.   width: 200px;
  72. }
  74. .f-btn {
  75.   width: 200px;
  76.   margin-top: 20px;
  77. }
  78. </style>