7.1组件与复用

作者: 咸鱼前端 | 来源:发表于2019-03-02 13:12 被阅读0次

Vue 学习笔记入门篇可复用性的组件
7.1组件与复用
第七章可复用性的组件详解（上）
Vue 可复用性的组件详解
7.可复用性的组件详解
三篇文章学完Vue(二)
Vue 基础 - 组件
vue——组件
组件化简述优势
2018-09-18 vue第六章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件与复用</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <!-- 1.组件的限制 -->
        <!-- <table>
            <tbody is="my-component"></tbody>
        </table> -->
        <!-- Vue组件在渲染的时候会受HTML的限制，例如table内规定只能是tr，td，所以在table内渲染组件是无效的，这时候可以用特殊的is来挂载组件。常见的限制元素还有<ul>、<ol><select> -->
        <!-- 2.组件的data属性 -->
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
        <br>
        <br>
        <!-- JavaScript对象是引用关系，所以如果return的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。这种结果不是我们想要的，所以每个组件的data是单独的 -->
        <my-component2></my-component2>
        <my-component2></my-component2>
        <my-component2></my-component2>
        <!--这样单独的将data独立出来，三个按钮就互不影响了，完全达到了复用的目的-->
    </div>
    <script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        /*Vue.component("my-component",{
            template: "<h1>这是我创建的组件！</h1>"
        })//全局组件*/
        /*var Child = {
            tepmplate: "这是我创建的组件！"
        }//局部组件*/

        //引用外部data对象
        var data = {
            counter: 0
        };
        var Child = {
            template: "<button @click='counter++'>{{ counter }}</button>",
            data: function () {
                return data;
            }
        }

        //独立data对象
        var Child2 = {
            template: "<button @click='counter++'>{{ counter }}</button>",
            data: function () {
                return {
                    counter: 0
                }
            }
        }
        var vm = new Vue({
            el: "#app",
            components: {
                "my-component": Child,
                "my-component2": Child2
            }
        })
    </script>
</body>
</html>