Vue(九)——组件(一)基础介绍、全局注册、单向数据流

组件

基础介绍

参考：Vue 组件_哔哩哔哩

• 组件本质上是可复用的Vue实例，所以在内部同样有data，methods等属性
• 区别是：没有挂载的声明，不存在el这样的挂载选项；

template——定义挂载Dom，也可以理解为设置组件结构，最终被引入根实例

注意：template定义的结构只能有一个根元素（即所有的内容都包含在一个Dom元素里）

props——自定义组件的属性的数组，方便其他组件传值，类似接口的的形参，用来接收数据

data——组件里的data要封装在一个方法里，是因为要区分全局的变量的定义,确保组件定义的变量只能在组件内部调用

用途

1. 用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装成一个整体
2. 提高功能的复用性、可维护性，更好专注业务逻辑

形式

通过组件名作为Html自定义标签名

		<div id="app">
			<!--普通Html标签  -->
			<span>普通Html标签</span>
			<!-- 自定义组件标签-->
			<my-com></my-com>
		</div>

全局注册

• 全局注册的组件在注册后可用于任意实例或组件里
• 全局注册必须设置在根Vue实例创建之前

组件命名规则

定义有两种规则

1. kebab-case: my-component
2. PascalCase: MyComponent

Vue.component('MyCom',{/*选项对象*/});
Vue.component('my—com',{/*选项对象*/});

应用规则

在Dom里只能采用kebab-case: ' my-component'

<my-com :vk="msg"></my-com>

Demo：

		<div id="app">
			<!--普通Html标签  -->
			<span>普通Html标签</span>
			<!-- 自定义组件 -->
			<my-com></my-com>
		</div>

			Vue.component('MyCom',{
				template:`<div><p>这里是结构最简单的组件</p></div>`
			});

单向数据流

1. 父子间组件的所有prop都是单向下行绑定的。包含两层含义

   • 传值只能父组件向子组件传值
   • 子组件的变化不能反向影响父组件的数据

   父组件向子组件传值Demo

   		<div id="app">
   			<!-- 3.给组件自定义属性vk传值-->
   			<!-- 注意：这里的value必须是定义在组件父级元素里的 -->
   			<my-com :val="msg"></my-com>
   		</div>
   

   		<script type="text/javascript">
   		// 全局组件必须声明在Vue实例创建之前
   		   <!-- 声明方式1 -->
   			Vue.component('MyCom',{
   				//1.为组件声明一个属性val
   				props:['val'],
   				//2.将组件里的属性val值赋给template里Dom元素的属性
   				template:`<input type="text" :value="val"></input>`
   			});
   			new Vue({
   				el:"#app",
   				data:{
   					msg:"Hello Word"
   				}
   			})
   		</script>
   

2. 如果子组件要更改prop参数接收到的数据，应当存储在data中后操作

   		<div id="app">
   			<my-com :val="msg"></my-com>
   		</div>
   

   		<script type="text/javascript">
   			Vue.component('MyCom',{
   				props:['val'],
   				template:`<div>
                   {{title}}
                   <button  @click="fn">按钮</button>
                   </div>`,
                   data:function(){
   					return{
                           //1.将prop属性val存储在data中的title中
   						title:this.val
   					}
   				},
                   methods:{
                       fn(){
                           //2.存储完再更改储存的值title，不要直接修改this.val = "Hello Vue"会报错
                           this.title = "Hello Vue"
                       }
                   }
   			});
   			new Vue({
   				el:"#app",
   				data:{
   					msg:"Hello Word"
   				}
   			})
   		</script>
   

3. 如果prop为对象或者数组时，子组件操作会影响父组件的状态。

因为当prop为对象或者数组时，传递的是对象或者数组的引用，所以父子组件操作的引用指向的是同一对象或数组，任一一方改变都会真实改变这个对象或者数组的值

<div id="app">
			{{student.sname}}:{{student.age}}
			<my-com
			:val="msg"
			:stu="student"
			></my-com>

		</div>

        <script type="text/javascript">
			Vue.component('MyCom',{
				props:['val','stu'],
				template:`<div>
                {{title}}
                <button  @click="fn">按钮</button>
				{{st.sname}}:{{st.age}}
                </div>`,
                data:function(){
					return{
                        //1.将prop属性val存储在data中的title中
						title:this.val,
						st:this.stu
					}
				},
                methods:{
                    fn(){
                        //2.存储完再更改储存的值title，不要直接修改this.val = "Hello Vue"会报错
                        this.title = "Hello Vue";
						this.st.sname = "Hanmeimei";
						this.st.age = 19;
                    }
                }
			});
			new Vue({
				el:"#app",
				data:{
					msg:"Hello Word",
					student:{
						sname:"Lilei",
						age:18
					}
				}
			})
		</script>

效果图：