父访问子children-refs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn> <cpn ref="aa"></cpn> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template id="cpn1"> <div>我是子组件</div> </template> <script> const cpn1=Vue.extend({ template:"#cpn1", methods:{ showMessage(){ console.log("showMessage"); } }, data(){ return{ name:"我狮子组件的name" } } }) const app=new Vue({ el:"#app", data:{ message:"你哈啊" }, methods:{ btnClick(){ // console.log(this.$children); // for(let c of this.$children){ // c.showMessage(); // console.log(c.name); // } console.log(this.$refs.aa.name) } }, components:{ cpn:cpn1, } }) </script> </body> </html>
子传父
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <!-- 父组件模板 --> <div id="app"> <cpn @itemclick="cpnclick"></cpn> </div> <!-- 子组件模板 --> <template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button> </div> </template> <script> const cpn={ template:"#cpn", data(){ return{ categories:[ {id:"aaa",name:"热门推荐"}, {id:"bbb",name:"家用家电"}, {id:"hhh",name:"电脑办公"}, {id:"jjj",name:"手机数码"}, ] } }, methods:{ btnClick(item){ this.$emit("itemclick",item) } } } const app= new Vue({ el:"#app", data:{ message:"你好啊" }, components:{ cpn:cpn }, methods:{ cpnclick(item){ console.log("阿萨2",item) } } }) </script> </body> </html>
子访问父parent-root
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是cpn组件</h2> <cpn1></cpn1> </div> </template> <template id="cpn1"> <div> <h2>我是一个子组件</h2> <button @click="btnclick">按钮</button> </div> </template> <script> const cpn1=Vue.extend({ template:"#cpn1", methods:{ btnclick(){ console.log(this.$root.message) } } }) const cpn=Vue.extend({ template:"#cpn", components:{ cpn1:cpn1 } }) const app=new Vue({ el:"#app", data:{ message:"你号啊" }, components:{ cpn:cpn } }) </script> </body> </html>
组件的分离写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <!-- 模板第一种写法 --> <script type="text/x-template" id="cpn1"> <div> <h2>速递</h2> <p>你号</p> </div> </script> <!-- 模板第二种写法 --> <template id="cpn2"> <div> <h2>速递</h2> <p>按时</p> </div> </template> <script> //创建组件构造器对象 const Cpn=Vue.extend({ template:"#cpn2" }) //全局组件 Vue.component("cpn",Cpn) new Vue({ el:"#app", }) </script> </body> </html>
props
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./../../../vue.min.js"></script> </head> <body> <div id="app"> <cpn v-bind:tmovies="movies" :tmessage="message"></cpn> </div> <template id="cpn"> <div> <h2> {{tmovies}} {{tmessage}}</h2> </div> </template> <script> const cpn1=Vue.extend({ template:"#cpn", props:{ tmovies:Array, tmessage:{ type:String, default:"aaaa", //绑定v-bind就会显示默认值 required:true //必传值 } } }) new Vue({ el:"#app", data:{ message:"nihao", movies:['海泽旺','ADAJ','按时'] }, components:{ cpn:cpn1 } }) </script> </body> </html>
watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </body> </html>