Vue学习之组件切换及父子组件小结(八)
一、组件切换:
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>