Vue——邂逅Vue
Vue——Vue的基础语法
Vue——Vue的组件化
Vue——slot_插槽的基本使用
文章目录
1：组件化的介绍和使用2：组件步骤解析3：全局组件和局部组件4：父组件和子组件5：注册组件的语法糖6：组件模板抽离的方法7：组件数据的存放8：父子组件的通信8.1 props基本用法——父传子8.1.1 props数据验证8.1.2 父组件访问子组件：$children 8.2 子传父8.2.1 子组件访问父组件：$parent1：组件化的介绍和使用
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><cpn></cpn></div><script>const cpn=Vue.extend({template: '<div><h1>dada</h1></div>'});ponent('cpn',cpn)</script></body></html>
2：组件步骤解析
3：全局组件和局部组件
以下演示局部组件
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><cpns></cpns></div><script>const cpn=Vue.extend({template: '<div><a>dadadd</a></div>'});console.log(1);ponent('cpns',cpn);console.log(2);//局部组件const demo=new Vue({el: '#demo',components: {cpns: cpn}})</script></body></html>
4：父组件和子组件
代码演示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><mycp></mycp></div><script>const cpp=Vue.extend({template: '<div><h1>ppp</h1></div>',})const cps=Vue.extend({template: '<div><h1>sss</h1><cpp></cpp></div>',components: {cpp: cpp}})const demo=new Vue({el: "#demo",components: {mycp: cps}})</script></body></html>
5：注册组件的语法糖
代码示例如下
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><cpns></cpns></div><script>const demo=new Vue({el: '#demo',components: {cpns: {template: '<div><a>dadadd</a></div>'}}})</script></body></html>
6：组件模板抽离的方法
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo"><mycp></mycp></div><template id="demo1"><div><h1>sss</h1></div></template><script>const cpp=Vue.extend({template: '#demo1',})const demo=new Vue({el: "#demo",components: {mycp: cpp}})</script></body></html>
7：组件数据的存放
如果 Vue 没有这条规则(data必须是函数)，点击一个按钮就可能会影响到其它所有实例：
组件存放数据演示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="demo2"><mycp></mycp></div><template id="demo"><div><h2>{{message}}</h2><h1>dadad</h1></div></template><script>const a=Vue.extend({template: '#demo',data() {return {message: 11}}})const demo=new Vue({el: '#demo2',components: {mycp: a}})</script></body></html>
8：父子组件的通信
8.1 props基本用法——父传子
代码示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp></div><template id="demo"><div>{{datas}}</div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps}})</script></body></html>
8.1.1 props数据验证
8.1.2 父组件访问子组件：$children
代码演示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp><button v-on:click="btnclick()">点击</button></div><template id="demo"><div>{{datas}}</div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps},methods: {btnclick(){console.log(this.$children[0].name)//console.log(this.$children.datas[0])}}})</script></body></html>
8.2 子传父
代码演示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-on:itemclick="accpetnews"></mycp></div><template id="demo"><div><button type="button" v-for="item in species" v-on:click="btnclick(item)">{{item.name}}</button></div></template><script>const cps=Vue.extend({template: '#demo',data() {return {species: [{id: 'aa',name: '游戏'},{id: 'bb',name: '生活'},{id: 'cc',name: '学习'}]}},methods: {btnclick(item) {//console.log(item)//子组件发送事件this.$emit('itemclick')}}})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps},methods: {accpetnews(){console.log(1)}}})</script></body></html>
8.2.1 子组件访问父组件：$parent
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><mycp v-bind:datas="datas"></mycp></div><template id="demo"><div>{{datas}}<button v-on:click="btnclick()">点击</button></div></template><script>const cps=Vue.extend({template: '#demo',props: ['datas'],methods: {btnclick(){console.log(this.$parent)//console.log(this.$children.datas[0])}}})const app=new Vue({el: "#app",data: {datas: ['daa','aaa','aaa']},components: {'mycp': cps}})</script></body></html>
![[vue][面试]谈一谈对vue组件化的理解？](https://600zi.400zi.cn/uploadfile/img/15/795/a437b92ac32a17c573d9c9a0b0da7e07.jpg)
