全局组件
三步走: 创建vue-->注册全局组件-->在页面中使用全局组件
<body> <div id="box"> # 第三步 使用(在布局页面中使用) <global_component></global_component> </div> <script> # 第二步 注册(绑定关系,创建全局组件) Vue.component('global_component',{ template:`<h2> hello world! </h2>`, }); # 第一步 创建vue new Vue({ el:'#box', }) </script> </body>
局部组件
第一种用法:简单使用,跟全局组件类似(三步走),但是会渲染进DOM
<body> <div id="demo"> # 第三步:在布局中使用 <my_component></my_component> </div> <script> # 第一步:定义一个object类型的变量 let local_component = { template:`<h2> hello world! </h2>` }; new Vue({ el:'#demo', # 第二步:在创建vue实例中引入定义好的变量 components:{'my_component':local_component} }) </script> </body>
第二种用法:以template为根元素,不会渲染进DOM (两步搞定)
局部组件之间的使用
<body> <div id="demo"> <demo_local></demo_local> # 模板渲染 </div> <script> # 定义第一个局部组件变量 let header = { template:`<h1>{{ local_demo }}</h1>`, data(){ return { 'local_demo':'唧唧复唧唧,木兰当户织,不闻机杼声,惟闻女叹息!' } } }; # 定义第二个局部组件变量 let footer = { template:`<h1>{{ local_demo2}}</h1>`, data(){ return{ 'local_demo2':'问女何所思,问女何所忆.' } } }; # 定义第三个局部组件变量 let local = { template:`<div> <my_demo3></my_demo3> <my_demo4></my_demo4> </div>`, components:{ # 引入第一第二个局部组件 'my_demo3':header, 'my_demo4':footer } }; # 创建vue实例 new Vue({ el:'#demo', components:{ # 引入第三个局部组件 'demo_local':local } }) </script> </body>
组件之间的传值:
父子组件之间的通信(传值):
-
-
在子组件中使用props接收这个数据(变量名)
<body> <div id="app"> <app-container></app-container> </div> <script> // 2. 在子组件中使用props接收这个数据 let Header = { template: ` <div> {{ fatherData }} </div> `, props: ['fatherData'] }; // 1. 在父组件里面的子组件中绑定一个自定义属性 let Container = { template: ` <div> <app-header v-bind:fatherData="fd"></app-header> </div> `, data(){ return { fd: "我是你爸爸~~~" } }, components: { 'app-header': Header, } }; new Vue({ el: '#app', components: { 'app-container': Container } }) </script>
子父组件之间的互相传值:
1.在子组件中用过$emit(自定义事件)
向外抛出自定义事件
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>总数:{{ totalNum }}</p> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> <my-button v-on:aaa="addTotal"></my-button> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> // 注册全局组件 Vue.component('my-button', { template: `<button v-on:click="add">{{ this.num }}</button>`, data(){ return { num: 0 } }, methods: { add(){ this.num += 1; // 向父组件抛出一个自定义事件 this.$emit('aaa') } } }); let app = new Vue({ el: '#app', data: { totalNum: 0 }, methods: { addTotal(){ this.totalNum += 1 } } }) </script> </body> </html>
组件之间的互相传值
1.借助一个空Vue对象
let bus = new Vue()
2.
3.组件2中:mounted(){bus.$on(事件,(值)=>{...})}
// 借助一个空的Vue对象实现组件间通信 let bus = new Vue(); // 大项目用这个VueX //传值的那个组件 let B = { template: ` <div> <h1>这是 子组件: my-mjj </h1> <button v-on:click="add">选我</button> </div> `, data(){ return { num: 0 } }, methods: { add(){ this.num += 1; // 利用bus对象抛出一个自定义事件 bus.$emit('xuanwo', this.num); } } }; //接收的那个组件 let A = { template: ` <div> <h1>这是 子组件: my-alex </h1> <p>my-mjj被选中的次数:{{ num }}</p> </div> `, data() { return { num: 0 } }, mounted(){ // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件 bus.$on('xuanwo', (val)=> { // this.num += 1; // ? console.log(val); console.log(this); // this 是组件A this.num = val; }) } };
父组件监听子组件原生的事件
使用.native修饰符
<body> <div id="app"> <!--3.使用子组件--> <!--此处属于父组件的作用域--> <!--在父组件监听子组件的原生事件--> <my-test v-on:click.native="add" v-bind:name="sb" ></my-test> <my-test2 v-on:zdy="aaa" v-bind:name="sb" ></my-test2> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> // 1.声明子组件 (组件名首字母最好大写) let Test = { props: ['name'], template: `<button>hello {{ name }}</button>` }; let Test2 = { template: `<button v-on:click="bbb">子组件2</button>`, methods: { bbb(){ this.$emit('zdy') } } }; const app = new Vue({ el: '#app', data: { sb: 'Alex', }, methods: { add(){ alert('hello s16'); }, aaa(){ alert('周翔都不知道问题是什么!'); } }, // 2. 在Vue根实例中挂载子组件 components: { 'my-test': Test, 'my-test2': Test2, } }); </script> </body> </html>