vue实现从外部修改组件内部的变量的值


Posted in Javascript onJuly 30, 2020

1、首先是如何给你定义的变量拿到数据:

这里我自己用的是vuex:

首先在你项目的src文件夹下创建这么一个目录:

vue实现从外部修改组件内部的变量的值

之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据,

以下是index.js的代码:

vue实现从外部修改组件内部的变量的值

随后就是在homedatas中获取数据了,以下是homedatas.js代码:

vue实现从外部修改组件内部的变量的值

以上就是获取数据的步骤,之后就是在页面中拿到这个获取到的数据:

首当其冲不可少的就是引用,引用vuex和引用组件:

vue实现从外部修改组件内部的变量的值

之后在页面的jascript中的export default中定义组件,获取数据:

vue实现从外部修改组件内部的变量的值

用这个方式在页面中引用组件,然后再自定义标签中将数据传递给组件:

vue实现从外部修改组件内部的变量的值

2、子组件中获取父组件传递过来的数据:

props中定义属性,这是之前在页面自定义标签中设置的三个属性,分别控制组件中的不同部分,定义每个属性的类型、默认值以及测试函数,注意,测试函数一定要return一个值,不然页面会报错,测试函数的参数就是传递过来的值:

vue实现从外部修改组件内部的变量的值

scrolldatas是一个数组,之后便是循环遍历这个数组中的元素,数组中的值就能展示在页面了,页面元素会随着数组元素的改变而改变:

vue实现从外部修改组件内部的变量的值

之后就是其他两个变量怎么在组建中引用了:

首先我要在测试函数中判断一下,这个传进来的值符合不符合要求,如果不符合,那就不执行测试函数,就是默认值,如果符合要求,执行函数,并在函数中改变默认值,赋值给相应自定义变量:

vue实现从外部修改组件内部的变量的值

之后就是调用函数,调用函数中传入参数,这个参数现在的值不是最开始var的初始值,而是后来测试函数中因为符合测试函数的条件后来赋给的值(因为window.onload直到页面加载才会执行):

vue实现从外部修改组件内部的变量的值

之后就要在需要用到这个变量的函数中传一个参数(speed,这个speed的值就是上面changespeed的值):

vue实现从外部修改组件内部的变量的值

所以经过一会说那个的操作,只要在获取数据的地方修改值,页面效果就会随之改变,不需要再组件中修改任何东西:

vue实现从外部修改组件内部的变量的值

补充知识:vue 中如何修改传给component中的属性的值并赋值到template中

记录下来加强记忆

在外面引用option-item-template模板并传值进去,然后在component中对值进行修改然后在赋值到template

下面是外面引用的写法

<option-item-template v-bind:item="item" v-for="optionItem in item.option" v-bind:optionitems="optionItem" v-bind:answer="item.data.answer" v-bind:hassub="changeData.hasSub"></option-item-template>

模板部分的代码

Vue.component('option-item-template', {
  props: ['item', 'optionitems', 'answer','hassub'],
  data: function () {
    return {
      classname: {
        "choose-content": true,
        "stan-answer": false
      }
    }
  },
  watch: {
    hassub: function (newValue, oldValue) {//当hassub属性的值发生改变时会执行下面的代码
      this.changeStanAnswer(newValue, this.answer);
    }
  },
  mounted: function () {//模块编译/挂载之后执行
    this.changeStanAnswer(this.hassub,this.answer);
  },
  methods: {
    changeStanAnswer: function (sub, answer) {
      if (sub && (answer.indexOf(this.optionitems.chooseName) != -1)) {
        this.classname = {
          "choose-content": true,
          "stan-answer": true
        };
      } else {
        this.classname = {
          "choose-content": true,
          "stan-answer": false
        };
      }
    }
  },
  template: '<li class="mui-table-view-cell" v-if="optionitems.selectName || optionitems.selectImage">'
    + '<label :class="classname">'
    + '<input v-if= "item.data.itemType==2" type="checkbox" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" data-type="checkbox" :value="optionitems.chooseName" />'
    + '<input v-else type="radio" :name="item.data.tiKuId" v-bind:data-number="item.data.shiJuanNumber" :value="optionitems.chooseName" data-type="radio" />'
    + '<span class= "choose-btn" >{{optionitems.chooseName}}</span>'
    + '<span class="choose-text">'
    + '{{optionitems.selectName}}'
    + '![在这里插入图片描述]()'
    + '</span>'
    + '</label></li>'
});

由上面的代码所示,根据传进来的值hassub,和optionitems.chooseName的值来拼成最后需要加载的样式及class的值。
hassub的值是会变化的,同时需要根据改变的值加载不同的样式就需要在watch中监听hassub的值,当它的值发生改变时同时也改变class的值。

以上这篇vue实现从外部修改组件内部的变量的值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php设置编码格式的方法
2013/03/05 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
js取得url地址参数实例
2013/02/22 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
初始Nodejs
2014/11/08 NodeJs
webpack常用配置项配置文件介绍
2016/11/07 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python中特殊函数集锦
2015/07/27 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python如何定义有默认参数的函数
2020/08/10 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
慈善晚会策划方案
2014/05/14 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
尼克胡哲观后感
2015/06/08 职场文书
交通处罚决定书
2015/06/24 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
js中Object.create实例用法详解
2021/10/05 Javascript
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
移除Selenium中window.navigator.webdriver值
2022/06/10 Python