vue点击按钮打开组件并向组件传值

将要实现在页面中添加一个按钮打开一个d窗组件，并把一个object传给子组件。

项目里使用了element-ui。

页面获取add-Info组件 ：vales 是本页面要传的数据，:isvisibleadd 判断按钮点击时打开子组件

当点击click后:isvisibleadd等于true打开子组件

组件中：

组件是一个element的d框，props取到页面中传过来的数据并绑定到页面中。

<button @click='onclick'></button>

<div>

<mycomponent v-if='showcom'></mycomponent>

</div>

{

data: {

showcom: false

}

methods: {

onclick: function () {

this.showcom = true

}

}

}

Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件[1]  。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

这里分享下vue在不点击组件的情况下生成组件的方法。

设备：联想电脑

系统：xp

软件：VUE APPv1.9.23

1、首先在打开的软件中，创建一个js文件，用于存放组件。

2、然后定义组件的模板。

3、接着定义组件的输入参数。

4、引入vue和刚刚定义的组件。

5、接着创建基本的vue结构，使用组件以及添加数据。

6、最后将数据赋值给组件，最终的效果就完成了。

---