一、組件切換：
1、v-if與v-else方式：
<!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>組件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="flag=true">登錄</a> <a href="" @click.prevent="flag=false">注冊</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script> Vue.component("login", { template: "<h3>登錄組件</h3>" }); Vue.component("register", { template: "<h3>注冊組件</h3>" }); var vm = new Vue({ el: "#app", data: { flag: true }, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
2、組件切換之component方式：
<!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>組件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- 1.v-if 和v-else方式 --> <!-- <a href="" @click.prevent="flag=true">登錄</a> <a href="" @click.prevent="flag=false">注冊</a> <login v-if="flag"></login> <register v-else="flag"></register> --> <!-- 2.Vue 提供了 component ，來展示對應名稱的組件 --> <!-- component 是一個占位符，：is 屬性，可以用來指定要展示的組件的名稱 --> <a href="" @click.prevent="comName='login'">登錄</a> <a href="" @click.prevent="comName='register'">注冊</a> <component :is="comName"></component> </div> <script> Vue.component("login", { template: "<h3>登錄組件</h3>" }); Vue.component("register", { template: "<h3>注冊組件</h3>" }); var vm = new Vue({ el: "#app", data: { comName: "" }, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
3、組件切換之動畫效果：
<!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>組件</title> <script src="./lib/vue.js"></script> <style> .v-enter, .v-leave-to { opacity: 0; transform: translateX(150px); } .v-enter-active, .v-leave-active { transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <a href="" @click.prevent="comName='login'">登錄</a> <a href="" @click.prevent="comName='register'">注冊</a> <!-- 通過 mode 屬性，設置組件切換時候的模式 --> <transition mode="out-in"> <component :is="comName"></component> </transition> </div> <script> Vue.component("login", { template: "<h3>登錄組件</h3>" }); Vue.component("register", { template: "<h3>注冊組件</h3>" }); var vm = new Vue({ el: "#app", data: { comName: "" }, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
二、父子組件：
1、子組件默認是無法訪問父組件的；
2、父組件V-ON傳遞方法到子組件，子組件需要接收定義到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>組件</title> <script src="./lib/vue.js"></script> <style></style> </head> <body> <div id="app"> <!-- 父組件，可以在引用子組件的時候，通過屬性綁定（v-bind)的形式， 把需要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部， 供子組件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "這是父組件中的數據" }, methods: {}, components: { // 子組件默認是無法訪問到父組件中的data上的數據和methods中的方法 com1: { data() { // 子組件中的data數據，並不是通過父組件傳遞過來的，而是子組件啊自身私有的 // 比如：子組件通過AJAX，請求回來的數據，都可以放到data身上； // data 上的數據，都是可讀可寫的 return { title: "123", content: "qqq" }; }, template: '<h1 @click="change">這是子組件----{{ parentmsg }}</h1>', // 組件中的所有 props 中的數據，都是通過父組件傳遞給子組件的 // props 中的數據，都是可讀的，無法重新賦值 props: ["parentmsg"], // 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中定義一下，這樣，才能使用這個數據 directives: {}, filters: {}, methods: { change() { this.parentmsg = "被修改了"; } } } } }); </script> </body> </html>
3、子組件通過事件調用向父組件傳值：
<!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>組件</title> <script src="./lib/vue.js"></script> <style></style> </head> <body> <div id="app"> <com2 @func123="show"></com2> </div> <template id="tmp1"> <div> <h1>這是子組件</h1> <input type="button" value="這是子組件中的按鈕--點擊它，觸發：父組件傳遞過來的func 方法" @click="myclick" /> </div> </template> <script> // 定義一個字面量類型的 組件模板對象 var com2 = { // 通過指定一個ID，表示說，要去加載這個指定ID的 template 元素中的內容 // 當做組件的HTML結構 template: "#tmp1", data() { return { sonmsg: { name: "小頭兒子", age: "6" } }; }, methods: { myclick() { // emit 觸發、調用、發射 this.$emit("func123", this.sonmsg); } } }; var vm = new Vue({ el: "#app", data: { datamsgFormSon: null }, methods: { show(data) { this.datamsgFormSon = data; console.log("調用了父組件身上的 show 方法：---" + data); } }, components: { com2 // com2:com2 } }); </script> </body> </html>
三、使用ref獲取DOM元素和組件引用：
<!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>組件</title> <script src="./lib/vue.js"></script> <style></style> </head> <body> <div id="app"> <input type="button" value="獲取元素" @click="getElement" ref="mybtn" /> <h3 id="myh3" ref="myh3">周末也在一直學習</h3> <hr /> <login ref="mylogin"></login> </div> <script> var login = { template: "<h1>登錄組件</h1>", data() { return { msg: "son msg" }; }, methods: { show() { console.log("調用了子組件的方法"); } } }; var vm = new Vue({ el: "#app", data: {}, methods: { getElement() { // console.log(document.getElementById("myh3").innerText); // ref --[reference] // console.log(this.$refs.myh3.innerText); // console.log(this.$refs.mylogin.msg); this.$refs.mylogin.show(); } }, components: { login } }); </script> </body> </html>