在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的,

弗敢专也, 必以分人

环境: node.js npm vue-cli 以上安装请自行百度

一、项目创建

$ vue init webpack

   这里需要注意的是“前面的一些项目名称什么的都可以直接回车,最后三个选项要注意,是代码检测”,这个代码检测有点烦的地方是要求代码必须极其规范,我tab符用4个空格都不允许,必须两个,所以到这里我选择不用代码检测,webpack编译后不影响使用!

   上面的命令会在当前目录下生成一些文件,这些文件是基于webpack的vue项目模板,省时省力,不用自己去搭建环境(其实是因为我手动搭建的很不规范,有能力的同学自己来)

  搭建好了环境,就可以开始码喽!

  目录结构下我们注重的是src目录,里面是我们要敲码的地方(其他目录干嘛的在这里就不解释了,自行度)

二、开始

  首先入口文件是main.js

  可以看到

const vm = new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

  此处new了一个实例,

  并引入了路由 router

  定义了实例的模板是App标签

我们进入与它同级的App.vue文件中

里面由3个结构组成

// html部分
<template></template> // JS部分
<script></script> // 样式部分
<style></style>

我们的html部分必须由一个根组件包裹

<template>
  <div class="vue">
    // code...
  </div>
</template>

下面进入正题

<template>
  <div class="vue">
    <h1>This App Title</h1>
    <my-name></my-name>
  </div>
</template>
 
<script>
  // 一般情况下,我会将组件放在components目录下
  import Name from './components/Name.vue'
  export default {
    components: {
      'my-Name': Name
    }
  }
</script>

上面我们就完成了对name组件的引用,我们还没有创建这个组件

进入components目录,新建文件Name.vue

<template>
  <div class="name">
    {{ myname }}
  </div>
</template>
 
<script>
  export default {
    props: [
      'yourname'
    ],
    computed: {
      myname () {
        this.yourname
      }
    }
  }
</script>

此处的重点是:props属性是接收传过来的值,另外使用了computed属性将收到的值赋给当前组件的data中的myname属性上,最终得以展示!

最后在App.vue组件中,使用

<my-name :yourname="fea"></my-name>

即可将值传给这个组件,并展示在页面上,具体你想用传来的值做什么,随你喽!

Vue.js中组件传参的方法 - 基于webpack模板的更多相关文章

  1. vue组件传参的方法--bus事件总线

    定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...

  2. 兼容性js中setTimeout 传参“保值”方案

    这里所谓“保值”,是指在setTimeout中指定的时间后,执行指定的方法所用到的“参数”值,跟执行setTimeout时该“参数”值一样.是不是有点懵?看如下例子: ================ ...

  3. js中函数传参的情况

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  5. [js]js中函数传参判断

    1,通过|| function fun(x,y){ x=x||0; y=y||1; alert(x+y); } fun(); 2.通过undefined对比 function fun(x,y){ if ...

  6. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  7. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  8. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  9. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

随机推荐

  1. C#7的新语法

    阅读目录 out变量 元组(Tuples) 模式匹配(Pattern matching) 本地引用和返回(Ref locals and returns) 本地函数(Local functions) 表 ...

  2. leetcode中Database题(一)

    Combine Two Tables Table: Person +-------------+---------+ | Column Name | Type | +-------------+--- ...

  3. 编译MangosZero

    最近研究了一下魔兽世界模拟器MangosZero,花了两天时间终于编译成功!现在把编译的过程做个完整的记录,以便让想要学习编译的同学们少走弯路! 服务器端运行界面: 客户端运行界面: 一:下载源程序 ...

  4. Nginx Access Log日志统计分析常用命令

    Nginx Access Log日志统计分析常用命令 IP相关统计 统计IP访问量 awk '{print $1}' access.log | sort -n | uniq | wc -l 查看某一时 ...

  5. Filter execution threw an exception 错误

    Filter execution threw an exception 错误,我在web.xml中配置了一个filter用spring来解决懒加载的问题,为什么就会包这个错 java.lang.NoS ...

  6. HTML在网页中插入音频视频简单的滚动效果

    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就o ...

  7. (转载)Google的PageRank算法

    本文由张洋(敲代码的张洋)投稿于伯乐在线. 本文转载于:http://blog.jobbole.com/23286/ 很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的 ...

  8. java OJ题目判断输入结束(与C语言的EOF结束等价)

    /* * java 作Oj题目是会有输入若干数据的情况,不好判断输入结束符, * 类似于C语言中的EOF符号 * 在这里提供了一种方法 * */ import java.util.Iterator; ...

  9. javaWeb项目(SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat)之二 基础Hibernate框架搭建篇

    我们在搭建完Struts框架之后,从前台想后端传送数据就显得非常简单了.Struts的功能不仅仅是一个拦截器,这只是它的核心功能,此外我们也可以自定义拦截器,和通过注解的方式来更加的简化代码. 接下来 ...

  10. JS模式---命令模式

    var opendoor = { execute: function () { console.log("开门"); } }; var closedoor = { execute: ...