探索vue2框架的世界：简述常用的vue2选项式API (二)

组件实例

👉 $attrs 用于父组件隔代向孙组件传值 长设置在子组件中 v-bind="$attrs" (Vue2.4)

• parent.vue (父组件)

  
  <template><div class="outer"><h3>父组件</h3>名字：<input v-model="name">年龄：<input v-model.number="age" type="number">电话：<input v-model="phoneNumber"><child :name="name" :age="age" :phoneNumber="phoneNumber"></child></div>
  </template><script>
  import Child from "./Child";
  export default {name: 'Parent',components: {Child},data() {return {name: 'Tony',age: 20,phoneNumber: '1234567890'}}
  }
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid red;padding: 20px;
  }
  </style>

• child.vue (子组件)

  子组件作为父组件和孙组件的传递中介，在儿子组件中给孙子组件添加v-bind=“$attrs”，这样孙子组件才能接收到数据

  <template><div class="outer"><h3>子组件</h3><div>获得顶层组件的name：{{name}}</div>// 孙子组件<grand-child v-bind="$attrs"></grand-child></div>
  </template><script>
  import GrandChild from "./GrandChild";
  export default {components: {GrandChild},props: ['name'],created() {console.log('Child=> $attrs: ' + JSON.stringify(this.$attrs));}
  }
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid blue;padding: 20px;
  }
  </style>
  

• grandChild.vue (孙子组件)

  <template><div class="outer"><h3>孙组件</h3><div>顶层组件的name：{{name}}</div><div>顶层组件的age：{{age}}</div><div>顶层组件的phoneNumber：{{phoneNumber}}</div></div>
  </template>
  <script>
  export default {name: "GrandChild",props: {name: {type: String},age: {type: Number},phoneNumber: {type: String}},created() {// this.parentAge = this.age;  //也可以这样取值console.log('GrandChild=> $attrs: ' + JSON.stringify(this.$attrs));}}
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid green;padding: 20px;
  }
  </style>

👉 $listeners 用于孙组件隔代向父组件传值 设置在子组件上 v-on="$listeners"(Vue2.4)

• parent.vue 父组件

  
  <template><div class="outer"><h3>父组件</h3><div>myData:{{ myData }}</div><child @changeData="changeMyData"></child></div>
  </template>
  <script>
  import Child from "./Child";
  export default {name: 'Parent',components: {Child},data() {return {myData: 100};},methods: {changeMyData(val) {this.myData = val;}}
  }
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid red;padding: 20px;
  }
  </style>
  

• child.vue (子组件)

  子组件作为父组件和孙组件的传递中介，在儿子组件中给孙子组件添加v-on=“$listeners”，这样父组件才能接收到孙组件的数据

  
  <template><div class="outer"><h3>子组件</h3><grand-child v-on="$listeners"></grand-child></div>
  </template>
  <script>
  import GrandChild from "./GrandChild";
  export default {components: {GrandChild}
  }
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid blue;padding: 20px;
  }
  </style>

• GrandChild.vue（孙组件（最底层组件））

  
  <template><div class="outer"><h3>孙组件</h3><input v-model="data1" @input="edit"/></div>
  </template>
  <script>
  export default {name: "GrandChild",data() {return {data1: 200,}},methods: {edit() {// 发送事件this.$emit("changeData", this.data1);}}
  }
  </script><style scoped>
  .outer {margin: 20px;border: 2px solid green;padding: 20px;
  }
  </style>

👉 $listeners 和 $attrs 的实际案例

el-table 做一层封装，el-table上设置属性 v-bind="$attrs" 和 v-on="$listeners" , 封装好的组件，就可以使用el-table上的方法和属性

<template><div class="page-table"><div class="wrapper"><el-tableref="elTable"v-bind="$attrs"v-on="$listeners":data="tableData"><slot/></el-table><div style="margin-top: 16px;overflow: hidden"><el-paginationclass="page":current-page="currentPage"layout="total, prev, pager, next, jumper":total="total"@current-change="handleCurrentChange"/></div></div></div>
</template>

👉 $mount 用来挂载我们定义好的模板

• $mount的函数在Vue的原型链上，Vue的任何实例都可以直接调用
• vue挂载是替换对应节点

// vue挂载方式有两中
//el属性
var app=new vue({el:"#app",data(){}
})
//$mount挂载
var app=new vue({data(){}
})
app.$mount("#app")
// vue2main.js中挂在方式
new Vue({router,store,render: h => h(App)
}).$mount('#app')// render: h => h(App)是一种缩写，参数App对应的App.vue：
render: function (createElement) {//createElement 函数是用来生成 HTML DOM 元素的 作者把 createElement 简写成 h。return createElement(App);//
}

👉 $options 调用vue的各个组件下的方法和数据

• vue实例属性 $options 是一个对象，可以调用vue的各个组件下的方法和数据
• 即 new vue({}) 大括号内的东西，统称为options
• 使用场景

  • 过滤器不能通过this来复用，可以使用this.$options.filters.xxxx来调用

  • 重置data的数据(拿到初始化数据)，比如表单填写一半，用户想重新填写

    export default{data(){return{form:'input'}},methods:{// 重置表单reset(){this.form=this.$options.data().form}}
    }
    

  • 也可以通过给组件$data对象赋值来重置来重置整个$data

    this.$data=this.$options.data()
    

  • 为了提升vue的性能，不需要的数据不用放入data中做成响应式，因为定义data中的数据会被自动添加了get和set方法，有时会有性能的浪费，可以把这部分数据放到与data平级中，通过$options去调用或修改

     <span> {{$options.big}}</span><el-button @click="changeName">改变big变量</el-button>
    <script>
    export default {big: "冬雨",data() {return {};},methods:{changeName(){console.log(this.$options.big);this.$options.big="周冬雨";},}//在data外面定义的属性和方法通过$options可以获取和调用</script>
    // 点击按钮之后，bigName的值会变，但是界面显示还是之前的。因为没有对bigName绑定set、get方法。
    

  • this.$data与this.$options.data()两者的区别

    • 前者是变化的值，而后者是初始化的值

      methods:{gotos(){this.obj.sex='我改变了'},//获取vue中data中的所有值 当然data中的值也有可能是被改变了的obtain(){console.log('vue中data中的所有值',this.$data);},// 获取组件下初始状态下的值；就是你在data中最初写的值inithander(){console.log('初始状态下的值',this.$options.data());},// 重置值reset(){Object.assign(this.$data.obj,{name:'',age:'', sex:''});// 还可以使用   Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空console.log('重置', this.obj )}}
      

👉$router和$routes 路由跳转传参和接参

• this.$router 全局的路由对象，包含很多属性和对象，任何页面都可以调用其方法

  • this.$router.push （常用）通过修改url实现路由跳转
    • 传递参数会拼接在路由后面，出现在地址栏 this.$router.push({path:‘路由’，query:{key:value}})
    • 传递参数不会拼接在路由后面，地址栏看不见参数 this.$router.push({name:'路由的name'，params:{key:value}})
  • this.$router.replace
    • 跳转到指定路由，替换history中最后一个记录，点击后退会返回至上一个页面（A->B->C被替换成A->C）
    • replace 属性默认为false，点击时不会留下history记录，push方法也可以传replace
    • this.$router.push({path: '/homo', replace: true})
  • this.$router.go(val) 在history中记录的前进或者后退val步
  • this.$router.back() 在history中记录后退1步
  • this.$router.forward() 在history中记录前进1步

• this.$route 当前路由对象，是一个局部的路由对象，每一个路由都有一个route对象，可以使用其属性

  • this.$route.query
  • this.$route.params
  • this.$route.path 获取当前路由对象的路径
  • this.$route.name 获取当前路径名字
  • this.$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

👉 $forceUpdate()

• 强制该组件重新渲染

• 类型

  interface ComponentPublicInstance {$forceUpdate(): void
  }
  

• 鉴于 Vue 的全自动响应性系统，这个功能应该很少会被用到。唯一可能需要它的情况是，你使用高阶响应式 API 显式创建了一个非响应式的组件状态。