怎么在Vue中创建组件和传值-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么在Vue中创建组件和传值-创新互联

怎么在Vue中创建组件和传值？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都网站建设、网站设计易于使用并且具有良好的响应性。

## 创建组件的3种方法

# 第一种:
+ Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项
+ Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.;
参数1:组件名字,参数2:组件构造器

注意:
模板template中只能有一个根节点

组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a;

## 第二种:
+ Vue.component('indexB',{模板})

## 第三种:
+ 通过制定模板创建,在Vue管辖范围之外定义模板

## 总结:
+ 先制造一个模板,在创建组件

## 组件中使用指令:
+ 在Vue.component()里边,有template模板,有data()函数,有methods()方法
+ 注意:data()必须是一个个函数.不能使用属性定义;函数里边return出去一个对象

## 父组件传值给子组件的方法

* 先创建好父组件和子组件
* 在父组件的模板中的son,子组件标签里绑定 :属性 = 父组件需要传递的数据;
* 在子组件的son{}中使用props来接收父组件传递过来的数据;
* props后跟一个数组,数组中是一个个字符串,这些字符串可以当成属性使用,即props:['属性名']

* 代码如下:

Vue.component('father',{
    template:'....',
    data(){
      return{
        mySonName:'小明'
      }
    },
    //子组件
    components:{
      son:{
        props:['myName'],
        template:'...{{myName}}'
      }
    }
  })

## 子组件传值给父组件的方法
* 先创建好父组件和子组件;

* 在子组件methods方法中使用this.$emit()方法,
* 这个方法有两个参数;参数1:需要与父组件交换事件名称,参数2:要传递的数据;

* 在父组件模板的son标签中使用方法名的传递:

即,@tellFatherMyname = "getMySonName";

* 在父组件的methods方法中传入data参数,这个data=子组件传递过来的数据,然后让mySonName = data;*

代码如下:

### 兄弟组件的创建和传值:

* 创建兄弟组建时,先创建好父组件,然后在子组件中创建son组件和 daughter组件;
* 接下来是 son组件和daughter组件之间传值;
* dau --> son传值

* 在dau中先通过事件总线发射一个事件名称和要传递的数据;即eventbus.$emit('事件名称','数据')
* 事件总线:

var eventbus = new Vue();

* 在 son 中先写一个钩子函数,再通过eventbus.$on('事件名称',data=>{})方法去监听,接收兄弟节点发射过来的事件
* $on()有两个参数,参数1:事件名称;参数2:函数,函数的默认值是传递过来的数据* 代码如下:
*

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

关于怎么在Vue中创建组件和传值问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：怎么在Vue中创建组件和传值-创新互联
本文地址：http://lswzjz.com/article/djogog.html

新闻中心

Vue的优点

其他资讯