Vue 中组件使用中的细节点

栏目: JavaScript · 发布时间: 5年前

内容简介:如何使用正常渲染一个组件这样写没有啥问题,但是在

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 ,如下图

Vue 中组件使用中的细节点

正常来说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 了。如下图所示:

Vue 中组件使用中的细节点

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.名字 时获取到的是对应子组件的引用。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

付费:互联网知识经济的兴起

付费:互联网知识经济的兴起

方军 / 机械工业出版社 / 2017-6-1 / CNY 59.00

关于互联网知识付费的首部作品 知识工作正在被重塑,知识经济正在开启互联网时代下半场 为你展现互联网知识经济全景大图,解读新物种的前世今生 内容简介 一个产业解读 三个分析工具 一组知识卡片 书是最早的知识载体,已有2000多年的付费历史,随着移动互联网的普及,新的知识经 济在今天爆发,知识的创造者和传播者从书后走到了书前,互联网知识经济正在拉开帷幕。知识的......一起来看看 《付费:互联网知识经济的兴起》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具