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

2024-01-09 18:44:26

组件实例

👉 $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
		}
	}
}

    • 也可以通过给组件 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.$route 当前路由对象，是一个局部的路由对象，每一个路由都有一个route对象，可以使用其属性

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

👉 $forceUpdate()

  • 强制该组件重新渲染

  • 类型

    interface ComponentPublicInstance {
  $forceUpdate(): void
}

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

文章来源:https://blog.csdn.net/Code_King006/article/details/135486260
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。