一、组件切换：
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>