VUE 之 组件
组件是为了解决页面布局的。
什么是单页面？
答：整个页面的切换都是在这个页面上进行变化的，没有页面的刷新。
1、全局组件
1.1全局组件流程： 1.创建全局组件======>创建一个Vue实例
<div id="app"> <global-component></global-component> # 第一种渲染<global-component>的方法。流程：1>全局组件中有一个global-component参数，此时就开始查。2>查到new Vue中的app有
</div> # global-component标签，此时就会将data中的数据传给template中进行替换。由于自定义的标签在<div id='app'>中包着，所以生成的页 <script> # 也有div包着 Vue.component("global-component",{ template:`<div><h1>{{name}}</h1></div>`, data(){ return { name:'我叫小沈阳' } } }); new Vue({ el:'#app', // template:`<global-component></global-component>` # 第二种渲染方法 由于Vue根实例中有了template来承载自定义的标签，div顶部中就不需要写自定义标签了。而此时就会把Vue }) # 实例中自定义的标签作为根，在这个标签中进行渲染数据。
2、局部组件
局部组件实际上就是创建了一个JavaScript object
局部组件的执行流程： 创建一个局部组件（let 变量)=====>然后创建一个Vue根实例。 =====>创建一个入口app来承载本来应该在Vue实例中的代码，为了是代码更加清晰。
内部的三大步骤：创建局部组件====>注册（components)=====>使用
<div id='app'>
</div>
let Header = { template:`<div><h1>{{greeting}}</h1></div>`, # let Header 就是创建一个局部组件，内部除了没有el属性，其他属性都可以写。必须要有承载标签的template data(){ return{ greeting:'HELLO World' } } }; let App = { # 创建一个App入口，内部注册一个app_header标签指向Header,然后用template承载该标签。 template:`<div><app_header></app_header></div>`, components:{ app_header:Header } }; new Vue({ # 创建一个Vue根实例 注册一个 属性名：指向App,在template中承载该标签。 el:"#app", template:`<div><APP></APP></div>`, components:{ APP:App } })
3、父子组件通信
父组件如何给子组件传送数据
<div id="app"> </div> <script> let Son = { 1、# 先定义自一个局部组件 template:`<div> <h1>{{greeting}}</h1> <h2>{{father}}</h2> 7、#将数据交给template进行渲染 </div>`, props:['father'], 6、# 子组件中通过props:[],这种形式来接收父组件传送来的数据 data(){ return{ greeting:'Hello World' } } }; let App = { 2、# 再定义一个入口组件注册局部组件 template:`<div> <my_son v-bind:father="fatherData"></my_son> 5、# 给注册的属性绑定一个字定义属性，father </div>`, components:{ my_son:Son }, data(){ 4、# 将数据赋值给自定义的属性father return{ fatherData:'Who are you!' } } }; new Vue({ 3、# 创建一个Vue实例，注册所有组件的入口组件 el:"#app", template:`<App></App>`, components:{ App } }) </script>
4、子父组件的通信
子组件如何将数据传送给父组件
业务要求：点击子组件让父组件的字体变大
<div id="app"></div> <script> let Son = { 1、# 创建一个子组件 template:`<div> <button @click="Son_Click">点我就会变大</button> </div>`, methods:{ 9、# 只要绑定事件就用methods，然后通过this.$emit('自定义父组件中的事件',参数) Son_Click:function () { this.$emit('change_size',0.1) } } }; let Father = { 2、# 创建一个入口父组件 template:`<div> <span :style="{fontSize:postFontSize + 'em'}">我是你爸爸</span> 11、# 通过参数的传递使得字体发生变化，在template中渲染出来。 <my_son @change_size="fatherClick"></my_son> 5、# 生成自定义的标签，并绑定一个自定义的点击事件，这个change_size就是自定义的，相当于 </div>`, click,父组件绑定字定义点击事件是用来监听父组件是否发生变化 components:{ 4、# 注册子组件 my_son:Son }, data(){ 6、# 传送数据，设定posFontSize 默认字体大小为1 return{ postFontSize:1 } }, methods:{ 7、# 由于绑定了事件，所以要用methods方法，然后自定义一个fatherClick函数 赋值给自定义事件 fatherClick:function (value) { 10、# value 用来接收子组件传过来的参数。 this.postFontSize += value } } }; new Vue({ 3、# 创建一个Vue实例 el:'#app', template:`<Father></Father>`, components:{ Father } }) </script>
5、非子父之间通信（用中间调度器）
<script> let hanfei = new Vue(); // 中间调度器什么都不传 let B = { template: `<div> <h1>这是B</h1> <button @click="my_click">点我向A说话</button> </div>`, methods: { my_click: function () { console.log("马") // 向A说话 // 向中间调度器提交事件 hanfei.$emit("maweihua_say", "晚上等我一起吃饭~~~") // 组件向中间调度器提交过来的数据用$emit } } }; let A = { template: `<div><h1>这是A</h1>{{say}}</div>`, data(){ return { say: "" } }, mounted(){ // 监听中间调度器中的方法 let that = this; hanfei.$on("maweihua_say", function (data) { //中间调度器向组件提交数据的时候用$on console.log(data) that.say = data }) } }; const app = new Vue({ el: "#app", components: { A, B } }) </script>
6、混入（mixs）
由于有多个组件存在且有使用相同的可能是数据，也可能是方法时，就可以用混入mixs来封装这个数据或者方法，然后在其他组件调用即可。
<div id="app"></div> <script> let mixs = { # 由于都使用了show方法，所以创建一个mixs组件用来封装这些属性 methods: { show: function () { console.log('我来了') } } }; let A = { # 创建组件A
template: `<div> <button @click="show">点我</button> # 使用了show这个方法 </div>`, mixins: [mixs], # 通过固定搭配 mixins:[mixs]调用 mixs这个组件 }; let B = { # 创建组件B template: `<div> <button @mouseenter="show">触摸我</button> # 使用了show这个方法 </div>`, mixins: [mixs], }; new Vue({ # 创建Vue实例 el: "#app", template: `<div> <A></A> <B></B> </div>`, components: { A:A, B:B } }) </script>
7、插槽
插槽可以进行内容的分发，提高组件的复用性。相同的组件写多个块，就可以用插槽，写一个组件，然后通过slot进行内容分发，来提高复用性。
<div id="app"> <global-component>我佛</global-component> # 同相同的<global-component>标签可以写多个块 <global-component>慈悲</global-component> </div> <script> Vue.component("global-component",{ template:`<div><slot></slot></div>`, # 可以通过slot进行数据分发，将多个块中的内容，而不是标签分发给template进行渲染 }); new Vue({ el:'#app', }) </script>
8、具名插槽
也是插槽的一种，它是将所有的slot标签包在了自己定义的里边
<div id="app"> <global-component> <div slot="header">首页</div> <div slot="first">第一页</div> <div slot="second">第二页</div> </global-component> </div> <script> Vue.component("global-component",{ template:`<div> <slot name="header"></slot> # name 是slot中的夫定的写法 <slot name="first"></slot> <slot name="second"></slot> </div>`, }); new Vue({ el:'#app', }) </script>
