vue.js 创建组件 子父通信 父子通信 非父子通信

1.创建组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
    需求：创建一个组件，显示"这是一个组件"。
    思路：调用Vue.extend方法和Vue.component方法。
    步骤： 1.在html创建一个<my-component/>组件。
           2.调用Vue.extend(),将要显示的元素模板赋给template属性，并将整个方法赋给myComponent。
           3.调用Vue.component(),将my-component与myComponent关联。
           4.创建一个Vue的实例。
-->
    <div id="demo">
        <!--html组件的命名必须是字母小写，每个单词用-分割进行语义区分，如list-head-component,这是为了与react区别。-->
        <my-component></my-component>
    </div>
    <script>
        var myComponent=Vue.extend({
            template:"<div>这是一个组件</div>"
        });
        Vue.component("my-component",myComponent);//这里注意将my-component用引号引起来。
        new Vue({
            el:"#demo"
        })
    </script>
</body>
</html>

2.创建组件简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建组件简写</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        需求：创建一个简写的组件。
        思路：将Vue.extend方法省略，在Vue.component的第二个参数上用一个对象代替Vue.extend方法。
    -->
    <div id="demo">
        <my-component></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            template:"<div>这是一个简写组件</div>"
        });
        new Vue({
            el:'#demo'
        })
    </script>
</body>
</html>

3.创建复合组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建复合组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
        思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
    -->
    <div id="demo">
        <parent-component></parent-component>
    </div>
    <script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"<div>我是子组件</div>"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
            components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
            data:function(){//组件中的data是一个函数
                return {
                    message:"我有一个子组件"
                }
            }
        })
        //创建一个vue的实例
        new Vue({
            el:"#demo"
        })
    </script>
</body>
</html>

4.创建动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建动态组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
    需求：创建一个最简单的动态组件,点击按钮切换组件。
    思路：用vue的特定的<component></component>元素，动态的绑定is属性，使得多个组件在同一挂载点，实现某一组件的显示或隐藏等等,keep-alive用于缓存，防止多次渲染。
-->
    <div id="demo">
         <!--keep-alive 有俩种属性：include(缓存匹配)，exclude(不缓存匹配的)-->
        <keep-alive include="First,Second,Third">
            <!--注意动态组件必须是component，这是固定的-->
            <component v-bind:is="options"></component>
        </keep-alive>
        <button id="btn" v-on:click="toggle()">切换组件</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#demo',
            data:{
                options:"First"//options绑定到is特性
            },
            components:{//建立三个组件分别是First,Second,Third
                First:{
                    template:"<div>first</div>"
                },
                Second:{
                    template:"<div>second</div>"
                },
                Third:{
                    template:"<div>third</div>"
                }
            },
            methods:{
                toggle:function(){
                    var arr = ["First","Second","Third"];
                    var index = arr.indexOf(this.options);
                    this.options = index<2?arr[index+1]:arr[0];
                    console.log(this.$children);//这里显示缓存的值。
                }
            }
        })
        console.log(vm.$children);
    </script>

</body>
</html>

5.创建复合组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建复合组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
        思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
    -->
    <div id="demo">
        <parent-component></parent-component>
    </div>
    <script>
        //创建一个子组件
        var Child=Vue.component("child-component",{
            template:"<div>我是子组件</div>"
        });
        //创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
            components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
            data:function(){//组件中的data是一个函数
                return {
                    message:"我有一个子组件"
                }
            }
        })
        //创建一个vue的实例
        new Vue({
            el:"#demo"
        })
    </script>
</body>
</html>

6.创建父传子通信组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建父传子通信组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
    需求：创建一个父组件向子组件通信的复合组件，传递的属性可以再vue实例来动态改变的,比如我们在vm的data中传一个"我是子组件"，然后传给父组件参数，最后在子组件中显示出来。
    思路：1.通过让子组件的props和父组件的props实现连通来达到目的。
-->
    <div id="demo">
        <!-- 当组件接受来自vm的动态数据时，需要用v-bind-->
        <parent-component v-bind:parent_props = "vmData"></parent-component>
    </div>
    <script>
//        创建一个子组件
        var Child = Vue.component("child-component",{
            template:"<div>{{child_props}}</div>",
            props:["child_props"]//子组件props,很奇怪props的属性值不可以用驼峰式，也不能有-，所以我只能用_来将单词分开╮(╯▽╰)╭
        })
//        创建一个父组件
        Vue.component("parent-component",{
            template:"<div>{{msg}}<child-component v-bind:child_props ='parent_props'></child-component></div>",//v-bind:child_props="parent_props"是实现父子props连通的关键。
            props:["parent_props"],//父组件props属性，它是一个数组。
            components:{//将子组件添加到父组件
                "child-component":Child
            },
            data:function(){
                return {
                    msg:"我是打酱油的"//不想让父组件直接包裹子组件，所以才加上的附加品。
                }
            }
        })
        //创建一个vue实例
        new Vue({
            el:'#demo',
            data:{
                vmData:"我是子组件"
            }
        })
    </script>
</body>
</html>

7.创建子传父通信组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建子传父复合组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
    <parent-component></parent-component>
</div>
<script>
    /*
    * 需求：点击一个按钮，然后在按钮下面的显示点击次数，
    * 思路：按钮为子组件，显示次数为父组件，在子组件的methods中加入clickEvent方法，在方法中书写emit来进行子组件和父组件的关联，通常子传父都是通过事件来触发。
    * 步骤：1.创建一个子组件，子组件中有一个按钮，在按钮添加一个点击事件调用方法clickEvent，在方法内写this.$emit("clickEvent")，在html中子组件的属性childPropKey=""childPropValue。
    *       2.创建一个父组件，父组件有一个插值{{num}},在父组件的methods中加入方法parentMethods.
    *       3.创建mv实例
    *
    * */
    var Child=Vue.component("child-component",{
        template:"<input type='button' v-on:click='clickEvent' value='子组件的按钮'>",
        methods:{
            clickEvent:function(){
                this.$emit("clickEvent");//这里是实现子传父的关键。
            }
        }
    })
    Vue.component("parent-component",{
        template:"<div>父组件的数字:{{num}}<br><child-component v-on:clickEvent='parentMethods'></child-component></div>",
        data:function(){
            return {num:0}
        },
        methods:{
            parentMethods:function(){
                this.num++;
            }
        },
        components:{"child-component":Child}
    })
    new Vue({
        el:'#div'
    })
</script>
</body>
</html>

8 非父子组件通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建同级组件通信的复合组件</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        需求：创建实现非父子组件的兄弟组件,a组件都是按钮，b组件显示数字，当点击a组件时b组件数字增加。
        思路： 1.创建一个空的Vue实例作为中央事件总线。 var bus = new Vue();
               2. 触发a组件的事件 bus.$emit("addNum")；
               3.在组件b创建的钩子中监听事件 bus.$on("addNum",funciton(id){//...})
    -->
    <div id="demo">
        <a-component></a-component>
        <b-component></b-component>
    </div>
    <script>
//        创建一个空的Vue实例作为中央事件总线。
        var bus = new Vue();
        //创建组件a
        Vue.component("a-component",{
            template:"<div><button v-on:click='addNum()'>增加</button></div>",
            methods:{
                addNum:function(){//触发a组件的事件
                    bus.$emit("addNum");
                }
            }
        })
//        创建组件b
        Vue.component("b-component",{
            template:"<div>{{num}}</div>",
            data:function(){
                return {
                    num:0
                }
            },
            mounted:function(){//在组件b创建的钩子中监听事件
                var _this = this;//引用this就会变成子方法控制的对象，如果需要上级的对像，在没有参数的情况下，前面前提做了一个临时变量_this，可以保存上级对像，子方法中就可以用_this来调用了
                bus.$on("addNum",function(){
                    _this.num++;
                })
            }
        })
        //创建vue实例
        new Vue({
            el:"#demo"
        })
    </script>
</body>
</html>