Vue组件基础

定义一个组件：

<template>
  <header>
      <h1>{{title}}</h1>
  </header>
</template>

<script>
export default {
  name: 'app-header',
  data () {
    return {
      title: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    background: lightgreen;
    padding: 10px;
}
h1{
    color: purple;
    text-align: center;
}
</style>

 在另一个组件中使用该组件，首先引入该组件，然后注册该组件（启发：通过组件的嵌套来实现页面的拼装）

/*app.vue是根组件*/

/*模板，HTML结构*/
<template>
  <div id="home">
    
    <app-header></app-header>
    <h2> hello world!{{title}} </h2>
    <users></users>
    <br>
    <app-footer></app-footer>
  </div>
</template>

/*行为，处理逻辑*/
<script>
//局部注册组件
import Users from './Users'
import Header from './Header'
import Footer from './Footer'
export default {
  name: 'home',
  data(){
    return{
      title:"这是我的第一Vue脚手架工具！"
    }
  },
  components:{
    "users":Users,
    "app-header":Header,
    "app-footer":Footer
  }
}
</script>

/*样式：解决样式*/
<style scoped>
h2{
  color: green;
}
</style>

 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

上面代码中组件注册的方式是局部注册，只能在引入该组件的Vue实例中使用。

也可以通过全局注册的方式注册组件：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

 

---

父组件向子组件传值

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

<!--
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
-->

 

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})


<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

 tips:every component must have a single root element (每个组件必须只有一个根元素)

---

 

 子组件向父组件传值：

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})
<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})