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>
