is的使用

直接使用组件可能会有bug，因为h5里面可能会有固定格式

出现需求：H5标签元素中如何正确使用子组件，比如<table><tbody><tr><td></td></tr></tbody></table>

下面是通过Vue实现的H5标签元素，但是出现了tr和td不在<table><tbody>里面。

<body><div id="app"><table><tbody><row></row><row></row><row></row></tbody></table></div><script>Vue.component("row",{// 子组件中的data必须是function函数data() {return {content:"this is a content"}},template:"<tr><td>{{content}}</td></tr>"})var vm = new Vue({el:"#app",})</script>
</body>

通过子组件row去解析<tr><td> </td></tr>这部分，则会出现问题

对于上面的bug，需要使用is，既保证tr使用了row这个子组件，又符合H5的编码规范，具体解决代码如下。

<body><div id="app"><table><tbody><tr is="row"></tr><tr is="row"></tr><tr is="row"></tr></tbody></table></div><script>Vue.component("row",{// 子组件中的data必须是function函数data() {return {content:"this is a content"}},template:"<tr><td>{{content}}</td></tr>"})var vm = new Vue({el:"#app",})</script>
</body>

类似还有:<ul><ol><li></li></ol></ul>、<section><option></option></section>

组件中的data必须是方法

在子组件定义data时传递内容必须是方法，值必须为一个函数（函数返回一个对象，对象要包含你所对应的数据），其中有两种写法，

<div id="app"><counter></counter><counter></counter>
</div>
<script>Vue.component("counter",{// data() {//   return {//     number : 0 （这里是：）//   }// },data:function(){return{number : 0 //（这里是：）}},template:"<div @click='HandleDivClick'>{{number}}</div>",methods: {HandleDivClick:function(){this.number ++}},})var vm = new Vue({el: "#app",})</script>
</body>

ref 引用

Vue中如何操作dom

出现需求：ref引用获取dom节点和dom内容？

解决方法：一般是如this.$refs.xxx获取dom节点，来进行dom操作，如下面代码

<body><div id="app"><!-- 一般来说你要在vue里操作DOM，要先在标签里加上ref=""，如下： --><div ref="Hello" @click="HandleDivClick">Hello world</div></div><script>// vue中如何操作domvar vm = new Vue({el: "#app",methods: {HandleDivClick:function(){// 打印出<div>Hello world</div>console.log(this.$refs.Hello)console.log(this.$refs.Hello.innerHTML)}}  })</script>
</body>

实现计算器中的功能

出现需求：制作一个计数器,并且能够点击数字就按顺序+1。

<body><!-- 实现计算器中的功能 --><div id="app"><counter></counter><counter></counter></div><script>Vue.component("counter",{// data() {//   return {//     number : 0//   }// },data:function(){return{number = 0}},template:"<div @click='HandleDivClick'>{{number}}</div>",methods: {HandleDivClick:function(){this.number ++}},})var vm = new Vue({el: "#app",})</script>
</body>

上面的代码只是有两个counter组件，每次点击就加一，下面添加对两个进行求和，相当于实现一个发布订阅的功能

子组件向父组件发送数据：向外界触发事件（这里用this.$emit="change"）用于告知，即在子组件定义methods使用$emit

父组件中counter组件：用于监听该触发事件，即绑定一个事件监听方法（这里@change="xxx"）

Vue实例定义methods，使用这个绑定后的方法

1、出现需求：这样一想，只需在change方法里做一个求和功能就可以实现求和
2、解决方法：使用ref引用形式
在子组件中分别在两个子组件下使用ref，在Vue实例中handleChange里计算两个子组件（this.$refs.one.number 和 this.$refs.two.number）的和，具体实现的代码如下。

<body><div id="app"><counter @change="HandlerChange" ref="one"></counter><counter @change="HandlerChange" ref="two"></counter><div>{{total}}</div></div><script>Vue.component("counter",{data() {return {number:0}},template: "<div @click='HandlerDivClick'>{{number}}</div>",methods: {HandlerDivClick:function(){this.number ++// 当子组件发生改变，那么就通过$emit向父组件传值this.$emit("change")}},})var vm = new Vue({el : "#app",data:{total: 0},methods:{HandlerChange:function(){this.total = this.$refs.one.number + this.$refs.two.number}}})</script>
</body>

参考资料：

慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
https://mp.weixin.qq.com/s/F1B32HPfaIsTtjubM8rlWw

后言

每天跑步成了必须，也成了一种习惯。

我很好，但是还差点运气
但努力的人运气都不会太差嘛
偶尔我可能还是会有负能量爆炸的时候
我还是想不通很多事情
但不会再为了屁大点事颠三倒四
不再去预测未来，我的任务就是让自己变得更好更棒
去迎接一轮又一轮新的面试

六十、深入理解Vue组件，使用组件的三个细节点相关推荐

vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
深刻理解Vue中的组件
今天看了下Vue官网上关于组件的教程,感觉内容还挺多,现在把组件中基本的知识梳理一下. 组件的基本使用注册组件注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传 ...
理解vue中的组件（二）
上节说到组件https://segmentfault.com/a/1190000009236700,这一节继续来学习组件: 原文博客地址,欢迎学习交流:点击预览从github上获取本文代码:示例代码 ...
六十五、vue生命周期和发送Ajax请求
vue生命周期和发送Ajax请求一 vue生命周期介绍二 vue生命周期钩子函数三测试三发送Ajax请求四计算属性五监听属性一 vue生命周期介绍每个 Vue 实例在被创建时都 ...
六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Entity Framework 4 in Action读书笔记——第六章：理解实体的生命周期（三）
objectstatemanager更改跟踪管理 ObjectStateManager组件(从现在开始称之为 state manager)负责与上下中对象追踪有关的一切: 1.当添加,附加到上下文或者 ...
英山往事之为母亲办六十大寿
英山往事之为母亲办六十大寿今年的五一真是个好日子,目前的生日按阳历算碰巧在五月二号.按国家规定,五一期间放假三天,我又多请假一天,回湖北老家为目前筹办六十大寿的酒宴. 我于四月三十号下午五点半从办公 ...
PCL点云处理之随机采样抽稀RandomSample（六十）
PCL点云处理之随机采样抽稀(六十) 一.原理二.代码三.效果一.原理随机选点,降低原始点云数量,抽稀后的点云坐标应该是和之前对应点坐标一样二.代码 #include <QtCore/ ...
快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值  ...

六十、深入理解Vue组件，使用组件的三个细节点

文章目录