本篇文章是我参考官方文档整理的,供大家参考,高手勿喷!

prop

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。

子组件要使用 props选项声明它期待获得的数据

官方的解释非常清晰了:两者之间需要有一个通讯工具才可以获取到对方的数据,props就是这个通讯工具,并且在通讯时需要说明我想得到什么数据;

先从组件之间的作用域说起

<div id="app">
<add></add>
<del></del>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
"add": {
template: "<button>btn:{{btn}}</button>",
data: function () {
return {btn: ""};
}
},
del: {
template: "<button>btn:{{btn}}</button>",
data: function () {
return {btn: ""};
}
}
}
});
</script>

在这段代码里:第一个的值是123,第二个的值是456(虽然他们都是btn)但由于作用域不同,所以不会互相影响

如何使用props绑定静态数据:

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。

<add btn="h"></add> 

【2】下面示例中的写法,不能传递父组件data属性中的值

【3】会覆盖模板的data属性中,同名的值。

<div id="app">
<add btn="name"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn:{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>

这种写法下,btn的值是name,而不是hello。

【4】驼峰写法

假如插值是驼峰式的,

而在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写。

而在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest)。

例如:

props: ['btnTest'],
template: "<button>btn:{{btnTest}}</button>",

正确的写法:

<add btn-test="h"></add>

假如插值写短横线式,或者是html标签写成驼峰式,都不能正常生效。(除非插值不写成驼峰式——跳过大小写的限制,才可以)

利用props绑定动态数据:

简单来说,就是让子组件的某个插值,和父组件的数据保持一致。

标准写法是(利用v-bind):

<add v-bind:子组件的值="父组件的属性"></add>

如代码

<div id="app">
<add v-bind:btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn:{{btn}}</button>",
data: function () {
return {'btn': "123"}; //子组件同名的值被覆盖了
}
}
}
});
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

字面量和动态语法:

【1】简单来说,不加v-bind的,传递的是字面量,即当做字符串(例如1也是字符串,而不是number类型);

【2】加上v-bind的,传递的是JS表达式(因此才能传递父组件的值);

【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);

<div id="app">
<add v-bind:btn="1+2"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn:{{btn}}</button>"
}
}
});
</script>

这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)

props的绑定类型:

【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);

【2】单向绑定示例:(默认,或使用.once)

<div id="app">
父组件:
<input v-model="val"><br/>
子组件:
<test v-bind:test-Val="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['testVal'],
template: "<input v-model='testVal'/>"
}
}
});
</script>

说明:

当父组件的值被更改后,子组件的值也随之更改;

当子组件的值被更改后,父组件的值不会变化,而假如再次修改父组件的值,子组件会再次同步。

另外需要注意的是,子组件如果要同步绑定,那么子组件的input需要是v-model,而不能是value属性(那样只能单项绑定,且修改子组件的值后会失去绑定)

【3】双向绑定:

需要使用“.sync”作为修饰词

如示例:

<div id="app">
父组件:
<input v-model="val"><br/>
子组件:
<test :test.sync="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template: "<input v-model='test'/>"
}
}
});
</script>

效果是无论你改哪一个的值,另外一个都会随之变动。

vue.js使用props在父子组件之间传参的更多相关文章

  1. vue 父子组件之间传参

    父组件中有子组件 msg 为父组件向子组件传的内容,  子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...

  2. Vue-cli父子组件之间传参

    一.父传子( 先写父组件 父组件 <template> <子组件 :子组件的变量名='父组件的变量'> </子组件> //子组件的变量名前的冒号千万别丢了有和没有是 ...

  3. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  4. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  5. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  6. vue 父子组件相互传参

    转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...

  7. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  8. vue.js $refs和$emit 父子组件交互

    父调子 $refs (把父组件的数据传给子组件)  <template> <div id="app"> <input type="butto ...

  9. 前台VUE的组件之间传参方式

    路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...

随机推荐

  1. git clone https://github.com/istester/ido.git ,确提示“Failed to connect to 192.168.1.22 port 8080: Connection refused” 的解决办法 。

    不知道是否有同学遇到如下的问题: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo } span.s1 { } git clone ...

  2. xshell连接ubuntu

    安装了 ubuntu-14 ,为了连接 xshell ,做出的一些配置如下: 1.激活root用户 sudo passwd root 设置新密码,设置成功后会有提示 passwd:password u ...

  3. Spring学习(14)--- 基于Java类的配置Bean 之 @ImportResource & @Value 注解

    学习如何使用@ImportResource 和 @Value 注解进行资源文件读取 例子: 先创建一个MyDriverManager类(模拟读取数据库配置信息) package com.beanann ...

  4. php 数据连接 基础

    1.造连接对象 $db= new MYSQLi("localhost","root","123","test_0306" ...

  5. SQL之trigger(触发器)

    先来看一小段程序 有如下三张表: 帐户(编号,姓名,余额,建立日期,储蓄所编号) 储蓄所(编号,名称,地址,人数,所属城市) 借贷(帐户,借贷类型,金额,日期) create trigger tri_ ...

  6. ecshop开发帮助

    http://www.ecshop.com/template_tutorial/ ECSHOP模板结构说明 http://help.ecshop.com/index.php ECSHOP帮助中心 ht ...

  7. WPF的一些感悟

    第一天在博客园写东西,只写一些自己对WPF稚嫩的理解和感悟. 1.Code Snippet代码简写工具 可以创建自己的代码模板管理器——>>>工具菜单,代码片段管理器 考出现有的+更 ...

  8. 用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  9. Solr6.6 Tomcat8部署

    原文:https://github.com/x113773/testall/issues/6 准备工作:[solr-6.6.0](http://www.apache.org/dyn/closer.lu ...

  10. windows上将代码上传到Github

    Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或指定合作者) Initialize this ...