vue组件相关知识点

1，父组件向子组件传值

**父组件向子组件传值：父组件通过属性绑定向子组件传值，子组件通过props从父组件接受值。**而后在子组件中使用时就和本组件的数据没差别，直接使用就行


先注册为子组件，然后使用时，父组件通过属性绑定向子组件传值，子组件通过props从父组件接受值。
当然，也可以注册全局组件：

可以看到，**vue里面有component方法，输入的参数一个是组件名字，另一个是定义的组件内容对象。返回值看起来是一个vue实例。**因为组件里面可以有自己的数据，方法，html结构：

值得注意的是：在父组件向子组件传值的时候，如果是属性绑定，则“”里面是js表达式，而如果不是属性绑定，则是传递双引号内部的字符串。子组件也可以接收和使用：

2，子组件向父组件传值

实际上是调用父组件中的函数改变父组件的值：

第一步：在子组件的字符串模板中写事件，调用自身组件的事件
第二步：在子组件的事件中，利用this.$emit{(}^{\prime }子组件事件代{称}^{\prime }，参数)方法调用父组件的函数第三步：在使用子组件时，需要绑定父子组件之间的联系：@子组件事件代称="父组件中定义的事件名（$enevt）"，这样才能调用父组件中的事件。
第四步：父组件中定义对应的事件，完成父组件数据的修改。

3，组件传值的单向数据流问题

父组件向子组件传值，子组件接收之后，不可以进行修改，因为如果传过来的是基本数据类型，是复制一份，倒也没事，但是如果是引用类型的，就会出现问题，会把栈中的数据修改掉，如果恰好其他子组件也引用了这个数据，就会被影响到。

4，组件参数校验

**第一步：**使用props:[‘接收传过来的字符串’]

		<div id="root">
			<child content="hello world"></child>
		</div>
		<script type="text/javascript">
			Vue.component('child',{
				props:['content'],  //接收父组件传过来的字符串
				template:'<div>{{content}}</div>'
			})
			var vm=new Vue({
				el:'#root',
				data:{
				
				}
			})

第二步，设置接收的参数必须是字符串

第三步，设置传递过来的字符串必须是number或者String

第四步：设置更多的校验：

5，给组件绑定原生事件

我们之前给组件标签绑定事件的时候，其实是在监听子组件中的原生html标签中的事件，然后通过$emit来调用父组件中的事件。
也就是说，我们直接在组件标签上定义事件，是无法调用原生事件的。
需要经过这样处理：@click.native=“functionNmame”

6,非父子组件之间传值

也就是利用事件总线bus，然后$emit触发事件，$on监听并处理事件即可。

7，在vue中使用插槽

https://blog.csdn.net/weixin_42349568/article/details/108700426