七 组件基础

最近工作忙没怎么看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
  }
}


阅读更多
个人分类: 前端 VUE
想对作者说点什么? 我来说一句

基础

线程 管道

duanymin duanymin

2016-02-01 11:20:59

阅读数:257

微分几何基础

2018年04月01日 2.06MB 下载

JAVA线程停止的方法

2012年01月30日 913B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭