Vue内敛模板

在学习《Vue实战》一书时，学习到组件高级应用-内联模板这一小节时，照着书上的例子敲了一遍，发现未达到预期，切报错。

书上源代码如下：

 1  
 2  
 3  
 4      
 5     
 6     
 7  
 8 
 9     

10         Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当作内容分发。
11         
12             

13                 
在父组件中定义子组件的模板
14                 
{{message}}
15                 
{{msg}}
16             
17         
18     
    
19  
34  
35 

 

实现效果及错误如下：

 

 

 经查询：inline-template没有那么强大，组件之间的通信仍然需要使用props，修改如下代码即可实现。

 1  
 2  
 3  
 4      
 5     
 6     
 7  
 8 
 9     

10         Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当作内容分发。
11         :message="message">
12             

13                 
在父组件中定义子组件的模板
14                 
{{message}}
15                 
{{msg}}
16             
17         
18     
    
19  
35  
36