三、Vue全局与局部组件、父组件与子组件

概念：

组件扩展了HTML代码，组件系统让我们可以用独立可复用的小组件来构建大型应用

组件component声明中有：

1. template模板，<template> 可复用的HTML代码<template>

2. 引用模板的JavaScript代码

3. css样式代码

4. 如果声明的是子组件，则可以声明一个props接收父组件传递的数据

全局组件

全局注册的组件可以用在其被注册之后的任何 通过new Vue建立的实例，和任何子组件中

全局注册组件方式：Vue.component("name",{template:''})声明，无须再new Vue的实例中赋值

局部组件

局部组件是要通过声明变量的方式，在变量里声明一个template，由于局部组件只能在被引用的实例中使用，所以需要在相应实例中加入component的组件声明，声明里边要引入template所在的变量名

html代码：显示全局组件all和局部组件child：

<div id="app">

    <all></all>

    <child><child>

  </div>

JavaScript代码


<script>

// 注册局部组件

  var Child = {

    template:'<h1>局部组件!<h1>'

  }

  //注册全局组件

  Vue.component('all', {

    template: '<h1>全局组件!</h1>'

  })

  Vue.component('anchored-heading', {

  template: '#anchored-heading-template',

  props: {

    level: {

      type: Number,

      required: true

    }

  }

})

  // 创建根实例

  new Vue({

    el: '#app',

    components:{

      'child':Child

    }

  })

<script>

 

父组件向子组件通过prop传递数据

• 父组件可以在组件里引用子组件

<div id="example">

    <parent></parent>

  </div>

<script>

//注册子组件

var childNode = {

  template: '<div>childNode</div>',

}

//注册父组件，由于引用了局部子组件，所以父组件需要用component{}对子组件声明

var parentNode = {

  template: `

  <div class="parent">

    <child></child>

    <child></child>

  </div>

  `,

  components: {

    'child': childNode

  }

};

//新建实例，对局部父组件进行声明

new Vue({

  el: '#example',

    components: {

    'parent': parentNode

  } 

})

</script>

 

• 子组件不能再模板里引用父组件的数据，所以要通过props选项使用父组件传来的数据

子组件需要显示的用props选项声明要接收父组件的数据

静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

比如下面的例子就是div的DOM节点作为父组件将数据“你好啊”传入子组件里

<div id ="div1">

<blog-post>  你好啊 </blog-post>

</div>

<script>

Vue.component('blog-post',{

  props:['title'],

  template:'<h3>{{title}}<h3>'

})

new Vue({

        el:"#div1"

    })

</script>