web開(kāi)發(fā)中使用組件要注意的細(xì)節(jié)點(diǎn)有哪些

發(fā)布時(shí)間：2021-10-18 11:47:17 來(lái)源：億速云閱讀：114 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下web開(kāi)發(fā)中使用組件要注意的細(xì)節(jié)點(diǎn)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <table>
        <tbody>
            <!-- <tr><td>1</td></tr>
            <tr><td>2</td></tr>
            <tr><td>3</td></tr> -->

            <!-- //雖然會(huì)顯示出來(lái)，但有問(wèn)題 <br> -->
            <row></row>
            <row></row>
            <row></row>

            <!-- //可行 <br> -->
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>

            <!-- //可行 <br> -->
            <ul>
                <li is="list"></li>
                <li is="list"></li>
                <li is="list"></li>
            </ul>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    Vue.component("row", {
        template: "<tr><td>1</td></tr>"
    });
    Vue.component("list", {
        template: "<li>1</li>"
    });
    var vm = new Vue({
        el: "#root"
    });
</script>
</body>
</html>

在子組件里定義data必須是函數(shù)，不能是對(duì)象（為了讓子組件之間不共享數(shù)據(jù)，通過(guò)函數(shù)返回讓每個(gè)子組件都有獨(dú)立的數(shù)據(jù)存儲(chǔ)）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <table>
        <tbody>

            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>

        </tbody>
    </table>
</div>
<script type="text/javascript">
    Vue.component("row", {

        /*//然而，在子組件，而不是根組件new Vue()中通過(guò)對(duì)象定義data是不可以的，而必須是函數(shù)
        data: {
            content: "this is a row"
        },*/

        //這才是正確的：
        data: function() {
            return {
                content: "this is content"
            }
        },
        template: "<tr><td>{{content}}</td></tr>"
    });
    Vue.component("list", {
        template: "<li>1</li>"
    });
    var vm = new Vue({
        el: "#root"
    });
</script>
</body>
</html>

vue不建議操作dom，但在處理一些復(fù)雜的動(dòng)畫效果，光靠vue的數(shù)據(jù)綁定并不一定能滿足情況。vue中通過(guò)ref操作dom：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <div ref="hello" @click="handleClick">hello world</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#root",
        methods: {
            handleClick: function() {
                //獲取指定dom節(jié)點(diǎn)
                console.log(this.$refs.hello.innerHTML)
            }
        }
    });
</script>
</body>
</html>

如果是獲取組件的dom呢？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>
<script type="text/javascript">
    Vue.component("counter", {
        template: "<div @click='handleClick'>{{number}}</div>",
        data: function() {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function() {
                this.number++
                this.$emit("change")
            }
        }
    })
    var vm = new Vue({
        el: "#root",
        data: {
            total: 0
        },
        methods: {
            handleChange: function() {
                /*console.log(this.$refs.one.number)
                console.log(this.$refs.two.number)*/
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    });
</script>
</body>
</html>

web開(kāi)發(fā)中使用組件要注意的細(xì)節(jié)點(diǎn)有哪些

以上是“web開(kāi)發(fā)中使用組件要注意的細(xì)節(jié)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

web開(kāi)發(fā)中使用組件要注意的細(xì)節(jié)點(diǎn)有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽