Vue 组件篇

初始化及注册

Vue.component('hello-component', {template: '<h1> Hello </h1>'});

简单实例

<body>
<div id="app">
  <hello-component></hello-component>
  <h3>{{msg}}</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
  // 注册组件
  Vue.component('hello-component', {template:'<h1>Hello</h1>'});
  //初始化 Vue 方程式
  new Vue({
    el:"#app",
    data() {
      return {
        msg:"world"
      }
    }
})
</script>
</body>

但用字符串模板编写复杂组件容易出错，冗余而且有点反人类，那么就引出了用HTML声明模板。

HTML 声明模板

Vue 可以通过 template 标签在 HTML 声明模板。

<template id="hello">
  <h1>Hello</h1>
</template>

然后再里面加上我们的组件，我们需要一个 ID 来指定模板

Vue.component('hello-component', {
  template: '#hello'
})

组件的作用域是本地的，而方程式的作用域是全局的。为了防止作用域泄漏,Vue明确地要求我们以函数的形式来声明这些属性

  Vue.component('hello-component',{
    template:'#hello',
    data:function () {
      return {title:"Hello"}
    }
  });

接下来我们要解决的问题就是将父级数据绑定到组件中

在 props 特性中指明这个属性
把它绑定到 hello-component 调用

<body>

<div id="app">
  <hello-component :user="user"></hello-component>
  <h3>{{msg}}</h3>
</div>
<template id="hello">
  <div>
  <h1>{{title}}</h1>
  <span>{{user}}</span>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
  // 注册组件
  Vue.component('hello-component',{
    template:'#hello',
    data:function () {
      return {title:"Hello"}
    },
    props: ['user']
  });
  //初始化 Vue 方程式
  new Vue({
    el:"#app",
    data() {
      return {
        msg:"world",
        user:"Admin"
      }
    }
})
</script>
</body>

组件嵌套

组件的完美之处在于它们可以在其它组件里面重用这就像乐高中的积木一样！我们来创建另一个组件；一个叫 greetings 由两个二级组件(form asking 和 hello component )组成的组件

<body>
<div id="app">
  <mix-component></mix-component>
</div>
<template id="hello">
  <h1>Hello {{user}}</h1>
</template>
<template id="form">
  <div>
    <label for="name">What's your name?</label>
    <input v-model="user" type="text" id="name">
  </div>
</template>
<template id="mix">
  <div>
    <form-component :user="user"></form-component>
    <hello-component :user="user"></hello-component>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
  // 注册组件
  Vue.component('hello-component',{
    template:'#hello',
    props:['user']
  });
  Vue.component('form-component',{
    template:'#form',
    props:['user']
  });
  Vue.component('mix-component',{
    template:'#mix',
    data:function () {
      return {user:'hero'}
    }
  });
  //初始化 Vue 方程式
  new Vue({
    el:"#app",
})
</script>
</body>

组件嵌套

组件间数据传递

父组件向子组件传递数据较为流畅，那么如何才能将子组件数据变化绑定至父组件呢。

单文件组件

我们知道以前的最佳实践是分离 HTML 、 CSS、 JavaScript。一些例如 React 的现代化的框架慢慢越过了这个规则。当今在一个单文件里写结构，样式，逻辑代码已经很普遍了。事实上，对于一些小型组件，我们完全可以转换成这种架构。 Vue 同样允许你在同一个文件里定义一切东东。这种类型的组件被认为是单文件组件。 HelloWorld.vue

<template>
  <h1></h1>
</template>

<script>
export default {
  data () {
    return {
      msg : 'Hello!'
    }
  }
}
</script>

使用HelloWorld.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>