vue学习第三天

最新推荐文章于 2022-10-01 21:47:51 发布

Pecodo

最新推荐文章于 2022-10-01 21:47:51 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

文章标签： vue 组件

本文链接：https://blog.youkuaiyun.com/Pecodo/article/details/86487171

这篇博客主要探讨了Vue组件的基础知识，包括组件的数据必须通过函数返回以确保独立性，组件需有一个根元素，如何通过事件与父组件通信，以及自定义组件的v-model实现，详细解释了v-model在标准标签和自定义组件中的不同应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件基础

一个组件要想重复使用,data值必须设为函数,函数里返回对象,这样才能避免多个组件实例公用一个对象(看需不需要public变量):

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

每个组件只能有一个根元素

//可以注册成功
<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>


//注册会失败 
<h3>{{ title }}</h3>
<div v-html="content"></div>

通过事件向向父机组件发送消息

//组件内的button点击发送自定义信号
<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

//blog-post为自定义组件
<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

//信号传值
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

//通过$event访问
<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

//用一个方法来接收
<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>
//vue.component中:
methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

自定义组件的v-model

v-model指令用在input,select等标准标签时vue会自动处理:将属性value与input事件绑定起来.

自定义组件想用v-model就需要model 将属性与事件绑定

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'  
  },
  props: {
    checked: Boolean  //这个不能少
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})