Vue 中组件使用中的细节点

2019-02-11 admin

is标签

如何使用is标签解决渲染中可能会出现的小bug

<div id="root">
    <table>
        <tbody>
            <row></row>
            <row></row>
            <row></row>
        </tbody>
    </table>
</div>
Vue.component('row',{
    template:'<tr><td>this is a row</td></tr>'
})
let vm = new Vue({
    el: '#root'
})

正常渲染一个组件这样写没有啥问题,但是在table中会有点小bug,如下图

正常来说3个tr应该在tbody里面,而现在和table同级了,这是怎么回事呢?

html5规范中,tbody里面必须是tr标签,否则会出错。该怎么解决呢?看下面代码

<div id="root">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
Vue.component('row',{
    template:'<tr><td>this is a row</td></tr>'
})
let vm = new Vue({
    el: '#root'
})

这段代码是什么意思呢?,意思是:tbody里面我要用一个组件,但我不能直接使用组件,所以我就写了一个tr,我用is表示,虽然这里写的是tr,但实际上它是名为row的组件。这样写,既能保证tr里面显示的使我们的组件,又能保证它符合html5的规范,程序就不会有bug了。如下图所示:

is标签就变成了我们想要展示的效果了。is标签还可以用在ulolselect标签中。

组件中的数据存储

在根组件里面,我直接要定义data,可以直接定义成对象的形式,不会有任何的问题。

但是当你在非根组件中子组件里去定义data,就不能直接定义成对象了,data的定义就必须要求,后面的值必须是一个函数。同时这个函数要求返回一个对象,这个对象里面要包含你所要的数据。

data(){
    return {
        content: 'this is content'
    }
}

在子组件里面定义data的时候,data必须是个函数,而不能是个对象,之所有这么设计是因为一个子组件不像根组件只会被调用一次,每一个子组件,它的数据我不希望和其他子组件的数据产生冲突,或者说每一个子组件都应该有自己的数据,而不是和其他组件共享数据。通过一个函数来返回一个对像的目的,就让每一个子组件都拥有一个独立的数据存储,这样就不会出现多个子组件之间互相影响的情况。

ref引用

我们说 Vue 不建议我们直接在代码中操作dom,但是在处理一些极其复杂的动画效果时,你不操作dom,刚靠 Vue 这种数据绑定。有些时候处理不了这样的情况,所以在某些必要的情况下,还真就得操作dom,那么在 Vue 之中如何处理dom呢?

<div id="root">
    <div ref="hello" @click="handleClick"></div>    // ref="hello"
</div>
<script>
    let vm = new Vue({
        el: '#root',
        methods: {
            handleClick(){
                console.log('hello world')
               this.refs.hello              //点击时获取 
            }
        }
    })

我给这个div起一个名字ref的名字叫做hello,然后在handleClick上就可以获取到它了。

那要是ref写在组件上,获取到的应该是什么呢?

<div id="root">
    <counter ref="one" @change="handleChange"></counter>    //组件中监听事件
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>
Vue.component('counter', {
    template: '<div @click="handleClick">{{number}}</div>',
    data() {
        return {
            number: 0
        }
    },
    methods: {
        handleClick(){
            this.number ++
            this.$emit('change')        //number 改变时,触发 change 事件
        }
    }
})
let vm = new Vue({
    el: '#root',
    data:{
        total: 0
    },
    methods: {
        handleChange() {
            this.total = this.$refs.one.number + this.$refs.two.number
        }
    }
})

当我点击组件时,handleClick会被触发,number会被改变,number改变时,用this.$emit触发change事件,counter组件中监听change事件,this.$refs.名字获取对应的组件,并相加,就能得到最后的total

当它写在div这样一个标签上的时候,this.$refs.名字时获取到的是标签对应的dom元素,而当你在一个组件上去写ref然后通过this.$refs.名字时获取到的是对应子组件的引用。

[转载]原文链接:https://segmentfault.com/a/1190000018120316

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53531.html

文章标题:Vue 中组件使用中的细节点

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部