组件实例
👉 $attrs 用于父组件隔代向孙组件传值 长设置在子组件中 v-bind="$attrs" (Vue2.4)
-
parent.vue (父组件)
javascript"> <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”，这样孙子组件才能接收到数据
javascript"><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 (孙子组件)
javascript"><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 父组件
javascript"> <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”，这样父组件才能接收到孙组件的数据
javascript"> <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（孙组件（最底层组件））
javascript"> <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上的方法和属性
javascript">
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
v-bind="$attrs"
v-on="$listeners"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
👉 $mount 用来挂载我们定义好的模板
- $mount的函数在Vue的原型链上，Vue的任何实例都可以直接调用
- vue挂载是替换对应节点
javascript">// 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);//
}
vue_289">👉 $options 调用vue的各个组件下的方法和数据
- vue实例属性
$options是一个对象，可以调用vue的各个组件下的方法和数据 - 即
new vue({})大括号内的东西，统称为options - 使用场景
-
过滤器不能通过this来复用，可以使用
this.$options.filters.xxxx来调用 -
重置data的数据(拿到初始化数据)，比如表单填写一半，用户想重新填写
javascript">export default{ data(){ return{ form:'input' } }, methods:{ // 重置表单 reset(){ this.form=this.$options.data().form } } } -
也可以通过给组件 d a t a 对象赋值来重置来重置整个 data对象赋值来重置来重置整个 data对象赋值来重置来重置整个data
javascript">this.$data=this.$options.data() -
为了提升vue的性能，不需要的数据不用放入data中做成响应式，因为定义data中的数据会被自动添加了get和set方法，有时会有性能的浪费，可以把这部分数据放到与data平级中，通过$options去调用或修改
javascript"> <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()两者的区别
-
前者是变化的值，而后者是初始化的值
javascript">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()
-
强制该组件重新渲染
-
类型
javascript">interface ComponentPublicInstance { $forceUpdate(): void } -
鉴于 Vue 的全自动响应性系统，这个功能应该很少会被用到。唯一可能需要它的情况是，你使用高阶响应式 API 显式创建了一个非响应式的组件状态。
