vue中的组件传值

父组件向子组件传值

这是最开始的代码：

	
	
	
	


	

		
		提交
		

			
			
		
	
	

父组件中data的数据，通过v-for和v-bind传递给了子组件

现在子组件向父组件传值

	
	
	
	


	

		
		提交
		

			
			
		
	
	

要想要传值给父组件，首先需要在子组件template模板中，加一个handleItemClick函数，再在子组件对象中的methods添加handleItemClick函数，调用this.$emit("delete", this.index)，前面用来监听父组件的函数，后面是传递给父组件函数的值

-------------------------------------------------------------------------------------------------------------------------

:count="1"

如果不加冒号，count里面就是一个字符串，而一旦加了冒号，就会被处理成表达式，就变成数字了

那么，我现在想要实现一个点击数字，数字就能够自己加1

如下：

点击之后是能够加上的

但是Vue会返回一个警告，原因在于如果是父组件count变化了，然后再传给子组件，那么是没有任何问题的，但是对于子组件来说，接受到父组件传过来的内容，只能去使用它，却不能改变它，就是一个单项数据流的意思，

之所以有这个单项数据流是因为如果父组件传过来的是一个引用值，那么其中一个子组件改变了其内容，如果有其他子组件也引用了这个数据，这就对其他子组件造成了影响

那么我们现在这个功能怎么实现呢？其实也简单，只要将this.count保存到自己得data中，然后对自己的data进行操作就可以了

这样就能实现相加，而且控制台不报错

那么现在实现将两个数字相加

子组件通过emit事件触发的形式，来向父组件传值；

父组件通过属性传递的方式，来向子组件传值，但是子组件不能改变父组件传递过来的值，如果非要修改，就复制一个副本，再进行改变