Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

既然有父传子那么肯定有子传父，有子传父肯定也有两者之间相互绑定

这里我们先看一下子传父的写法：

一、子传父：$emit()

看代码：

打印效果：

两者之间的关系： 

 1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

二、监听原生点击事件：.native 

不加.native时，不会触发原生的点击事件

	
		
		
	
	
	
		

              //    这里没有加native修饰符
		
		
		  
		
		
	

效果如下： 

不加修饰符是不会监听到原生点击事件的。

如果是加了.native修饰符时：

 添加方法：

效果如下图所示：

三、组件通信的案例：

效果如下：

 四、实现父子之间的值的双向绑定

在子组件中添加监听器，利用props和$emit来进行父子之间的双向绑定

效果 

 一个是除10一个是

五、父访问子 $refs

JavaScript中获取元素可以使用document.querySelector，那可以在Vue中使用吗？

我们可以测试一下

	
		
		
		
	
	
		

			
Nanchen
		
		
	

打印结果：

 答案是可以的，但是如果使用原生JS获取元素的话，那么用Vue就没有意义了，Vue中有特定的语法

官网解释：

$refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

	
		
		
		
	
	
		

			
Nanchen
		
		
	

效果与上图一致： 

六、使用$refs获取组件中的值

 既然可以获取普通元素那么也可以获得组件中的元素或者值

看这个例子：

	
		
		
 
	
	
		

          
		  点击
		
		
		  
		
		
	

效果如下： 

下面看一个扩展：

	
		
		
		
	
	
		

			
			
			
{{total}}
		
		
		
	

效果如下：

 

 不仅如此，ref还可以调用组件中的方法：

	
		
		
	
	
		

          
		   获取helloworld组件中的值
		
		
		
	

效果如下：

 六、is与：is

is

作用：解决了html模板的限制。

看下面这段代码：

会正常输出

 但是：

会发现tr并不在table中，

解决办法：

 打印结果：

用：is还可以用来绑定动态组件

	
		
		
		
	
	
		

			
			切换
		
		
	

效果如下：

以上就是Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别的详细内容，更多关于Vue父子组件数据双向绑定的资料请关注脚本之家其它相关文章！