vue获取history长度

开关

为分页组件添加一个开关（openroute），因为需要灰度上线，万一有问题，要调整的页面也只有一个。代码如下：

<script>

export default {

props: {

openroute: {

type: Boolean,

default: () => (true)

}

},

}

</script>

分页组件中存储页码和选择条件&获取页码

<script>

export default {

methods: {

fetchData(page) {

//请求参数

let params = thisparams;

//请求页码

let newPage;

//openroute处理

if (thisopenroute) {

//为url添上#page

if (page) {

historyreplaceState(paramsdata, documenttitle, "#" + page);

} else {

if (historystate) {

if (!historystatekey && locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

if (JSONstringify(historystate) !== JSONstringify(paramsdata)) { //选择条件变更则请求第一页

historyreplaceState(paramsdata, documenttitle, "#1");

} else {

historyreplaceState(paramsdata, documenttitle, "#" + locationhashsplit("#")[1]);

}

} else {

historyreplaceState(paramsdata, documenttitle, "#1");

}

} else {

if (locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

historyreplaceState(paramsdata, documenttitle, "#" + locationhashsplit("#")[1]);

} else {

historyreplaceState(paramsdata, documenttitle, "#1");

}

}

}

//获取url后面的#page

if (locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

newPage = Number(locationhashsplit("#")[1]);

} else {

newPage = 1;

}

} else {

newPage = page;

}

//请求数据，获得结果，传递给列表页面

}

}

}

</script>

列表页面获取选择条件

关键点：通过:id="getId(info)"将info属性(props)值传递到方法，然后再设置值，网上的watch方法试了无效，这个方法实测有效

源码如下：

<page v-bind:info="paginationVo" ></page>

// 注册 - 名字不能大写 分页组件<page v-bind:info="paginationVo" ></page>

Vuecomponent('page', {

// 声明 属性

props: ['info'],

template: '<ul :id="getId(info)" class="c_page"><li v-if="isShowPreBtn"><button v-on:click="btnHandler(-1)">上一页</button></li><li v-if="isShowNextBtn"><button v-on:click="btnHandler(-2)" >下一页</button></li></ul>',

data: function() {

return {

counter: 0,

paginationVo:{},

isShowPreBtn:false,

isShowNextBtn:false,

}

},

mounted() {

consolelog("-------mounted:"+JSONstringify(thispaginationVo));

这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可

例如：

父组件中：

子组件中:

这种情况下，子组件的methods中想要取到props中的值，直接使用thischartData即可

但是有写情况下，你的chartData里面的值并不是固定的，而是动态获取的，这种情况下，你会发现methods中是取不到你的chartData的，或者取到的一直是默认值

比如下面这个情况:

父组件中:

此时子组件的methods中使用thischartData会发现是不存在的(因为为空了)

这情况我是使用watch处理

监听chartData的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在watch里面执行

>

本期来实现， setup里面使用props,父子组件通信props和emit等 ，所有的源码请查看

在render函数中， 可以通过this,来访问setup返回的内容，还可以访问this$el等

由于是测试dom,jest需要提前注入下面的内容，让document里面有app节点，下面测试用例类似在html中定义一个app节点哦

本功能的测试用例正式开始

上面的测试用例

解决这两个需求:

针对上面的分析，需要在setupStatefulComponent中来创建proxy并且绑定到instance当中,并且setup的执行结果如果是对象，也已经存在instance中了，可以通过instancesetupState来进行获取

通过上面的 *** 作，从render中thisxxx获取setup返回对象的内容就ok了，接下来处理el

需要在mountElement中，创建节点的时候，在vnode中绑定下，el，并且在setupStatefulComponent 中的代理对象中判断当前的key

看似没有问题吧，但是实际上是有问题的，请仔细思考一下， mountElement是不是比setupStatefulComponent 后执行，setupStatefulComponent执行的时候，vnodeel不存在，后续mountelement的时候，vnode就会有值，那么上面的测试用例肯定是报错的，$el为null

解决这个问题的关键，mountElement的加载顺序是 render -> patch -> mountElement，并且render函数返回的subtree是一个vnode,改vnode中上面是mount的时候，已经赋值好了el,所以在patch后执行下 *** 作

在vue中，可以使用onEvent来写事件，那么这个功能是怎么实现的呢，咋们一起来看看

在本功能的测试用例中，可以分析以下内容：

解决问题:

这个功能比较简单，在处理prop中做个判断， 属性是否满足 /^on[A-Z]/i这个格式，如果是这个格式，则进行事件注册，但是vue3会做事件缓存，这个是怎么做到？

缓存也好实现，在传入当前的el中增加一个属性 el_vei || (el_vei = {}) 存在这里，则直接使用，不能存在则创建并且存入缓存

事件处理就ok啦

父子组件通信，在vue中是非常常见的，这里主要实现props与emit

根据上面的测试用例，分析props的以下内容：

解决问题：

问题1： 想要在子组件的setup函数中第一个参数， 使用props,那么在setup函数调用的时候，把当前组件的props传入到setup函数中即可 问题2： render中this想要问题，则在上面的那个代理中，在 加入一个判断，key是否在当前instance的props中 问题3： 修改报错，那就是只能读，可以使用以前实现的 api shallowReadonly来包裹一下 既可

做完之后，可以发现咋们的测试用例是运行没有毛病的

上面实现了props,那么emit也是少不了的，那么接下来就来实现下emit

根据上面的测试用例，可以分析出：

解决办法： 问题1： emit 是setup的第二个参数， 那么可以在setup函数调用的时候，传入第二个参数 问题2： 关于emit的第一个参数， 可以做条件判断，把xxx-xxx的形式转成xxxXxx的形式，然后加入on，最后在props中取找，存在则调用，不存在则不调用 问题3：emit的第二个参数， 则使用剩余参数即可

到此就圆满成功啦！

以上就是关于vue获取history长度全部的内容，包括:vue获取history长度、vue 全局组件component 获取props值、vue中子组件的methods中获取到props中的值方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！