探索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-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挂载是替换对应节点

// 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 显式创建了一个非响应式的组件状态。