探索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}} } -
也可以通过给组件 d a t a 对象赋值来重置来重置整个 data对象赋值来重置来重置整个 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. d a t a 与 t h i s . data与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.$router.push （常用）通过修改url实现路由跳转
-
this.$route当前路由对象，是一个局部的路由对象，每一个路由都有一个route对象，可以使用其属性this.$route.querythis.$route.paramsthis.$route.path获取当前路由对象的路径this.$route.name获取当前路径名字this.$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象
👉 $forceUpdate()
-
强制该组件重新渲染
-
类型
interface ComponentPublicInstance {$forceUpdate(): void } -
鉴于 Vue 的全自动响应性系统，这个功能应该很少会被用到。唯一可能需要它的情况是，你使用高阶响应式 API 显式创建了一个非响应式的组件状态。