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

这篇具有很好参考价值的文章主要介绍了探索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
      		}
      	}
      }
      
    • 也可以通过给组件 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. datathis.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://www.toymoban.com/news/detail-792440.html

到了这里,关于探索vue2框架的世界:简述常用的vue2选项式API (二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习---vue2--选项/数据--data-computed-watch-methods-props

    写在前面: vue提供了很多数据相关的。 简单的说就是进行双向绑定的区域。 vue实例的数据对象,会把data的数据转换成getter和setter,从而可以进行响应式的变化, vue实例创建后,可以通过vm.$data.x获取data里面的x,但同时vue实例也代理了其中的对象,所以我们一般使用简单的

    2024年02月14日
    浏览(39)
  • Vue2 API-源码

    目录 Vue.extend(option) delimiters functional  Vue.component(id, Function | Object)  Vue.directive( id, [definition] ) Vue.filter( id, function) Vue.nextTick() Vue.set() Vue.delete(target, index/key) Vue.compile(template) Vue.observable(object) provide/inject extends、mixins 作用:返回一个vue子组件的构造函数 参数:创建vue实例的参数

    2023年04月11日
    浏览(46)
  • 【Vue2.0源码学习】全局API篇-Vue中全局API分析

    与实例方法不同,实例方法是将方法挂载到 Vue 的原型上,而全局API是直接在 Vue 上挂载方法。在 Vue 中,全局API一共有12个,分别是 Vue.extend 、 Vue.nextTick 、 Vue.set 、 Vue.delete 、 Vue.directive 、 Vue.filter 、 Vue.component 、 Vue.use 、 Vue.mixin 、 Vue.observable 、 Vue.version 。这12个API中有的

    2024年02月08日
    浏览(43)
  • Vue3: 选项式API和组合式API的优缺点

    Vue框架提供了两种不同的API风格来编写组件,分别是 选项式API 和 组合式API 。 一.选项式API: 选项式API是vue2.x版本中默认使用的API风格,它是基 于对象的方式 来描述组件的行为和状态的。选项式API需要在Vue组件的选项对象中声明组件的属性和方法,如data、methods、computed、

    2024年02月09日
    浏览(46)
  • vue2 vue中的常用指令

    1.前端必备技能 2.岗位多,绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能(Vue2+Vue3) 概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架 Vue2官网:https://v2.cn.vuejs.org/ 1.什么是构建用户界面 基于数据 渲染出用户可以看到的 界面 2.什么是渐

    2024年02月11日
    浏览(35)
  • 【vue3.0 组合式API与选项式API是什么,有什么区别】

    Vue3.0中引入了组合式API(Composition API),同时保留了选项式API(Options API)。两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上,选项式 API 是在组合式 API 的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的

    2024年02月10日
    浏览(43)
  • 【前端框架】Vue2合集

    1、Vue概念 vue 是一个用于构建用户界面的渐进式框架,由数据驱动 vue 的两种使用方式 vue 核心包开发:局部模块改造 vue 核心包与 vue 插件 工程化开发:整站 开发 2、 创建实例 1、准备容器 2、导包 3、创建Vue实例 4、指定配置项 = 渲染数据 3、插值表达式 插值表达式语法:

    2024年01月19日
    浏览(47)
  • 从Vue2到Vue3【一】——Composition API(第一章)

    内容 链接 从Vue2到Vue3【零】 Vue3简介 从Vue2到Vue3【一】 Composition API(第一章) 从Vue2到Vue3【二】 Composition API(第二章) 从Vue2到Vue3【三】 Composition API(第三章) 从Vue2到Vue3【四】 Composition API(第四章) Vue3作为Vue.js框架的最新版本,引入了许多令人激动的新特性和改进。其

    2024年02月16日
    浏览(30)
  • 从Vue2到Vue3【四】——Composition API(第四章)

    内容 链接 从Vue2到Vue3【零】 Vue3简介 从Vue2到Vue3【一】 Composition API(第一章) 从Vue2到Vue3【二】 Composition API(第二章) 从Vue2到Vue3【三】 Composition API(第三章) 从Vue2到Vue3【四】 Composition API(第四章) 从Vue2到Vue3【五】 从Vue2到Vue3【五】——新的组件(Fragment、Teleport、S

    2024年02月16日
    浏览(39)
  • 从Vue2到Vue3【二】——Composition API(第二章)

    内容 链接 从Vue2到Vue3【零】 Vue3简介 从Vue2到Vue3【一】 Composition API(第一章) 从Vue2到Vue3【二】 Composition API(第二章) 从Vue2到Vue3【三】 Composition API(第三章) 从Vue2到Vue3【四】 Composition API(第四章) Vue3作为Vue.js框架的最新版本,引入了许多令人激动的新特性和改进。其

    2024年02月17日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包