七组件基础

最近工作忙没怎么看vue了，继续争取这周结束写demo

1、组件例子

<div id="app">
  <my-button></my-button>
</div>
</body>
<script>
// 注册组件，注册一个名为my-button的组件，标签是一个和data.count关联的计数器
// 似乎是只要写到返回对象里都可以被template读到
// count是会递增的，不是每次都从0记，是一个持续的数据
Vue.component('my-button',{
  data:function(){
	var msg = '123';
    return {
	  count:0,
	  msg:'123'
	}
  },
  template:'<button @click="count++">you click me {{count}} times{{msg}}</button>'
});
// 实例化
new Vue({el:'#app'})
</script>

<div id="app">
  <my-button></my-button>
  <my-button></my-button>
  <my-button></my-button>
</div>

如果以这种方式定义三个标签，三个标签的count是各自维护的

组件的data必须是一个函数，和实例不同，如果没有通过函数将各个实例标签区分开的话，可能会维护同一份count

2、props

<div id="app">
  <my-title title="123"></my-title>
  <my-title title="333"></my-title>
</div>
</body>
<script>
// 属性，表示你自定义的标签中可以添加的属性，这些属性不是加载template中原生标签上的
// 而是加在你使用时的
Vue.component('my-title',{
  props:['title'],
  template:'<h3>{{title}}</h3>'
});
// 实例化
new Vue({el:'#app'})
</script>

3、组件和实例的结合

先看代码和效果，后面一步步分解

代码如下

<div id="app">
  <my-title v-for="post in posts" :key="post.key" :title="post.title"></my-title>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-title',{
  props:['title'],
  template:'<h3>{{title}}</h3>'
}
);
var vm = new Vue({
  el:'#app',
  data:{
    posts:[
    {key:1,title:'t1'},
	{key:2,title:'t2'},
	{key:3,title:'t3'}]
  }
});
</script>

// 第一步注册组件
// 这个注册了一个叫my-title的标签，这个标签有一个自定义属性叫title，
// 并且这个title是显示在内容中的，这个自定义属性其实是衔接实例与标签内部的一个渠道
Vue.component('my-title',{
  props:['title'],
  template:'<h3>{{title}}</h3>'
}
);

<!-- 第二步和第三步其实可以说是一体的，这一步主要是表示这是一个循环标签
     v-for可以说是定义了循环的总数量，key是要求必带的，title就是关联每一个item和标签本身的pro
-->
<div id="app">
  <my-title v-for="post in posts" :key="post.key" :title="post.title"></my-title>
</div>

// 第三步就好理解多了，根据选择器实例化标签，把需要被遍历的对象传进去
var vm = new Vue({
  el:'#app',
  data:{
    posts:[
    {key:1,title:'t1'},
	{key:2,title:'t2'},
	{key:3,title:'t3'}]
  }
});

4、只有一个根元素

就是模板只能有一个根元素，官方介绍是用一个根元素吧所有子元素包起来

5、多个属性

假设一个组件定义了多个属性，这些属性又都需要从实例关联进，一次一次做绑定很麻烦，所以可以一次性以对象形式进行绑定。如

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

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

6、父级组件传递

<div id="app">
  <div :style="{fontSize:postFontSize +'em'}">
    <my-title v-on:enlarge-text="postFontSize += 0.1" v-for="post in posts" :key="post.key" :title="post.title"></my-title>
  </div>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-title',{
  props:['title'],
  template:'<div ><h3>{{title}}</h3>'+
  '<button v-on:click="$emit(\'enlarge-text\')">Enlarge text</button></div>'
}
);
var vm = new Vue({
  el:'#app',
  data:{
    posts:[
    {key:1,title:'t1'},
	{key:2,title:'t2'},
	{key:3,title:'t3'}],
	postFontSize :1
  }
});
</script>

7、父级组件传值

<div id="app">
  <div :style="{fontSize:postFontSize +'em'}">
    <my-title v-on:enlarge-text="postFontSize += $event" v-for="post in posts" :key="post.key" :title="post.title"></my-title>
  </div>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-title',{
  props:['title'],
  template:'<div ><h3>{{title}}</h3>'+
  '<button v-on:click="$emit(\'enlarge-text\',1)">Enlarge text</button></div>'
}
);
var vm = new Vue({
  el:'#app',
  data:{
    posts:[
    {key:1,title:'t1'},
	{key:2,title:'t2'},
	{key:3,title:'t3'}],
	postFontSize :1
  }
});
</script>

就是把数值用作$event里传过去

或者用方法传递

或者，如果这个事件处理函数是一个方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

七 组件基础