组件通过props属性传值
组件之间的传值
组件是一个单独功能模块的封装，有属于自己的data和methods，一个组件的 data 选项必须是一个函数
为什么必须是函数：因为只有当data是函数时，不同实例调用同一个组件时才会开辟新空间，互不干扰
data() {
return {
count: 0
}
}
父子组件区分
<div id="app">
<cpn> </cpn>
<cpn1></cpn1>
</div>
<script>
//子组件
const childCpn = Vue.extend({
template: `
<div>
<h3>我是局部组件，也是子组件</h3>
</div>
` })
// 父组件
const parentCpn = Vue.extend({
template: `
<div>
<h2>我是局部组件，也是父组件</h2>
<!-- 使用子组件 -->
<cpn1></cpn1>
</div>
`,
components:{
cpn1: childCpn //在父组件中注册子组件
}
})
let app = new Vue({
el:"#app",
data:{ },
components:{
cpn : parentCpn,
cpn1 : childCpn //若想在实例中使用子组件也需要在实例中注册
},
})
</script>
父传子
Prop 是可以在组件上注册的一些自定义属性，prop值可以是属性也可以是方法，最终都会出现在子组件的实例上供子组件直接调用
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop ，在组件实例中可以直接访问这个值，就像访问 data 中的值一样
<body>
<!--vue实例需要一个根组件div-->
<div id="app">
<ul>
<!--使用组件-->
<tokyo v-for="item in names " :first-name="item"></tokyo>
</ul>
</div>
<script type="text/javascript">
//注册组件
Vue.component('tokyo',{
props:['firstName'], //属性
template:'<li>名字:<h3>{{firstName}}</h3></li>' //模板
})
//vue实例
const app = new Vue({
el:'#app',
data:{
names:['lixiang','wanzi'],
}
})
</script>
</body>
命名方式：
组件名：组件名如果是多个单词时，首字母大写或者加横线都可以。MyComponentName 或my-component-name
若使用首字母大写的方式注册，使用时两种方式都可prop参数：camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名，在子组件内部命名方式不变，绑定父组件属性时要改驼峰命名
为短横线连接
语法
父传子分离写法
<!--父组件模板-->
<div id="app">
<!--使用子组件，v-bind绑定父组件属性给子组件props属性-->
<cpn v-bind:ctitle="title" :cname="names" ></cpn>
</div>
<!--子组件模板-->
<template id="cpnTemplate">
<div>
<h3>{{ctitle}}</h3>
<ul>
<li v-for="item in cname"> <p>{{item}}</p> </li>
</ul>
</div>
</template>
<script>
//注册子组件
const cpn ={
template:"#cpnTemplate",
props:['cname','ctitle'],
data(){
return{}
},
methods:{
}
}
//注册父组件
let app = new Vue({
el:"#app",
data:{
names:['丸子','莉香','三上'],
title:'hello'
},
components:{
// cpn:cpn
cpn //标签名和组件名相同时可简写为cpn
}
})
</script>
vue-cli项目组件写法
1、定义组件
<template>
<div>
<h3>{{ctitle}}</h3>
<ul>
<li v-for="item in cname"> <p>{{item}}</p> </li>
</ul>
</div>
</template>
<script>
export default {
name: "tokyoLoveStory",
components: {},
mixins: [],
props:['cname','ctitle'],
data(){
return{}
},
methods:{
}
};
</script>
2、使用组件
<template>
<!--使用组件时，需变驼峰为短横线-->
<tokyo-love-story v-bind:ctitle="title" :cname="names"></tokyo-love-story>
</template>
<script>
import tokyoLoveStory from 'xxx/tokyoLoveStory'
export default{
data(){
names:['丸子','莉香','三上'],
title:'hello'
} ,
components:{
tokyoLoveStory
},
methods:{
...
},
...
}
</script>
props另一种书写形式：
props:{
cname:'',
ctitle:'',
//基础类型
propA:Number,
//多个可能的类型
propB:[String,Number],
//必填的字符串
propC:{
type:Number,
required:true
},
//带有默认值的字符串
propD:{
type:Number,
default:100
},
//对象或数组默认值必须是一个函数，返回值是[]或{}
propE:{
type:Object,
default: function () {
return [];
}
}
子组件向父元素传值
想要子组件的数据传递给父元素，需要自定义触发事件，实现数据的传值。
子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件
<body>
<!--vue实例需要一个根组件div-->
<div id="app">
<ul>
<!--使用组件，绑定props属性，子组件的触发事件调用父元素方法达到传递参数的目的-->
<tokyo v-for="item in names "
:first-name="item"
:parentMethod="parentMethod"
@emitevent="emitName">
</tokyo>
</ul>
<h3>选中的姓名是：{{chooseName}}</h3>
</div>
<script type="text/javascript">
<!--注册组件-->
Vue.component('tokyo',{
props:['firstName'],
template:'<li>名字:<h3>{{firstName}}</h3> ' +
' <button @click="chooseEvent(firstName)">点击传递姓名</button></li>',
methods:{
chooseEvent(firstName){
console.log(firstName);
//触发父元素中emitevent事件，并传递firstName参数给该事件
this.$emit('emitevent',firstName);
}
parent(){
this.parentMethod() //parentMethod()在子组件实例中，可直接调用
}
}
})
const app = new Vue({
el:'#app',
data:{
names:['莉香','丸子','三上','里美'],
chooseName:''
},
methods:{
//父元素被触发的事件，name为子组件传递过来的参数，赋给父元素的data:{}中的属性
emitName(name){
console.log("被触发事件");
this.chooseName = name;
},
parentMethod(){
console.log("parentMethod")
}
}
})
</script>
</body>
组件通过props属性传值的更多相关文章
- 创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 组件的props属性和state状态
props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Prof ...
- 【Vue】组件watch props属性值
转载: https://www.cnblogs.com/mqxs/p/8972368.html #HTML <div id="example"> <p> & ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- vue.js 父子组件间 props 数据同步处理
常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
随机推荐
- git 要求密码的解决方法：【生成gitLab公钥】：以及如何配置GitLab中的SSH key
参考链接: https://www.cnblogs.com/yjlch1016/p/9692840.html https://blog.csdn.net/u011925641/article/deta ...
- 『Python』matplotlib的imshow用法
热力图是一种数据的图形化表示,具体而言,就是将二维数组中的元素用颜色表示.热力图之所以非常有用,是因为它能够从整体视角上展示数据,更确切的说是数值型数据. 使用imshow()函数可以非常容易地制作热 ...
- P4428-[BJOI2018]二进制【树状数组,set】
正题 题目链接:https://www.luogu.com.cn/problem/P4428 题目大意 长度为\(n\)的\(0/1\)串要求支持 修改一个位置 求区间\([l,r]\)有多少个子区间 ...
- JPA基本用法
jpa基本查询 1.继承JpaRepository,生成了CRUD方法 public void testBaseQuery() throws Exception { User user=new U ...
- Unittest 框架之测试固件-----（setUp与tearDown）你真的会用吗？
前言 做自动化测试中,需要管理大量的测试用例,如果不用框架管理用例,那会是一件很麻烦的事. 如果所示只写了一个用例,内容就是输入网易邮箱账号和密码 test fixture:测试固件 简单来说就是做一 ...
- 深入浅出WPF-12.绘图与动画
绘图 1)Brush(画刷) SolidColorBrush实心画刷,直接使用颜色赋值 LinearGradientBrush线性渐变画刷,色彩沿设定的直线方向.按设定的变化点进行渐变 RadialG ...
- Winform 窗体自适应
前言 在使用 Winform 开发过程中,经常发些因为显示器分辨率.窗体大小改变,控件却不能自适应变化,几经查找资料,和大佬的代码.经过细小修改,终于可以让窗体在外界影响下,窗体内背景图片.控件都会自 ...
- 实时渲染基础（4）纹理（Texture）
目录 纹理映射(Texture Mapping) 球形贴图(Spherical Map) 立方体贴图(Cube Map) 纹理走样问题 Mipmap 各向异性过滤(Ripmap) 纹理应用技术(Tex ...
- 关于我的Visual Studio2017修改安装重试9次失败问题解决
环境:windows vs2017 现象描述:本来我的vs可用的,一天想暗爪QT,插件安装好了不能创建QT项目,准备升级,然后问题出现了. 过程: 把人弄崩溃了,二三十k的速度在走,半路又终止.根本不 ...
- 关于dp那些事
拿到一道题,先写出状态转移方程,再优化时间复杂度 状态优化: 对于状态可累加 \(e.g.dp[i+j]=dp[i]+dp[j]+i+j\) 的,用倍增优化 决策优化: \(e.g.dp[i][j]= ...