Vue.js 父子组件之间的联系浅谈

首先 我们的思想面向对象编程而不是面向过程，所以，Vue给我们提供的思路是将将来要操作的DOM组件化。 组件化的方法就是利用new Vue（）构造函数实现，创建Vue的实例，然后挂载在一个Dom元素上，再通过Vue.extend（）方法创建各个组件，再通过Vue.component（xx,xx）来在挂载上（V）全局注册 （在new Vue（{ 里}）用components：{}局部注册）。这样我们就可以在挂载里使用我们自定义的组建了。 ||也可以 通过template模板里 ：

< template id= "hello-box" >

<!-- template中直接子元素必须有且仅有一个 -->

< div > 你好 </ div >

</ template >

.....

</body>

 

.....

<script>

/*

template模板标签

1. template标签是放在实例模板范围外的

2. template标签外在外层时是不会被解析的，也就是会在dom结构中出现,如果放在实例范围内，会被解析，将来不会出现在dom结构中

3. template中直接子元素必须有且仅有一个

*/

Vue. component( 'Hello',{

// template: '<div> 今年的目标： 找一个好的高薪工作 </div>'

template: '#hello-box'

})

 

 

< template id= "hello-box" >

<!-- template中直接子元素必须有且仅有一个 -->

< div > 你好 </ div >

</ template >