首页 > 代码库 > vue.js 创建组件 子父通信 父子通信 非父子通信

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=http://www.mamicode.com/‘子组件的按钮‘>",        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>

 

 

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