发表于： 2019-07-27 22:05:46
1 859
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识）
ref定义
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
使用方式
- 在vue的模板中，可以在任何元素中添加 ref 属性，这样就可以在vue的实例中引用这些元素（可以访问被ref包含的DOM元素。
- 有点类似原生js中通过document.getelementbyid来获取一个元素的引用；
注意，ref属性不是一个标准的HTML属性，只是Vue中的一个属性。实际上，它甚至不会是DOM的一部分，所以在浏览器中你查看渲染的HTML，你是看不到有关于ref的任何东西。因为在它前面没有添加:，而且它也不是一个指令
下面的代码中，给一个form表单添加了一个ref属性，
<el-form :model="data" :rules="rules" status-icon ref="ruleForm">
现在在vue的实例中通过$refs来取得这个表单的引用
在ts中无法识别$ref，解决办法是：
在控制台中打印出console.log(this.$refs);得到的是：
对象的键名as,ruleForm是在ref属性中指定的名称，其中的值是DOM元素，得到的DOM元素和vue 是没关系的。
现在打印出来的对象里有两个对象，因为在这个例子中有两个元素都添加了ref元素，点开以后放在$el上，视图上包含的是整个该元素。
使用场景
- 现在知道ref是什么东西以后，使用方式就大概和原生获取到元素一样，在vue的实例中执行一些事件响应或者方法，
当ref属性和v-for指令一起使用的时候，vue会迭代所有的dom元素，并将他们放在数组中。
vue - query、params 的区别
query 方式传参和接收参数
这里的区别是传参使用this.$router，接收参数使用的是this.$route，当时使用的时候没有注意这一点，使用this.$router来接收参数，卡了大半天。
那么他们的区别是什么呢？
在控制台上打印出this.$router得到：
查看了一下打印出来的结果，在history-current中也找到了name/path/query这些信息，本来想尝试通过this.$router.history.cerrent.query的方式来看看能不能获取到，query参数，但是的可能是ts语法的原因，到了cerrent这里就报错了：Property 'current' does not exist on type 'History'.
this.$router是VueRouter的实例，想要导航到不同的路径，就使用this.$router。
打印出this.$route后得到：
它是当前router的跳转对象，里面可以获取name、params、query等信息
params 方式传参和接收参数
传参: this.$router.push({ name:'xxx' params:{ id:id } }) 接收参数:this.$route.params.id
和query相比，传参和接收参数的语法基本上没有什么区别，除了query导航路径使用的是path:
params使用的是name: 因为params只能用name来引入路由，如果写的是path的话就会得到一个空白页面😁
比较显著的区别就是使用query的方式的传参的话，参数的会在地址栏中显示：http://localhost:8081/back/creditor?upperLendingDate=&lowerLendingDate=&lowerExpirationDate=&upperExpirationDate=，比如这样，地址栏里面会有一大串数据，他们是以键值对的方式存在的；而params的是不会在地址栏中显示的，他是隐式的。
返回列表
评论