vue组件传参
1、父传子
父:自定义属性名 + 数据(要传递)=> :value="数据"
子:props ["父组件上的自定义属性名"] =>进行数据接收
父级调用子组件,通过子组件的属性传入数据
子元素内部通过props配置(数组),来接受对应的数据,如props:['属性1','属性2',...]
- 在可复用的组件中,最上层只能有一个根元素,
即template模板中需要一个根元素包裹着子元素 - 组件中内部私有数据存储在组件data中,通过外部传入的数据, 则通过
props
选项接收。
props
:使用存储数据,组件内部使用数据的方式与data的一样 - 一个组件默认可以拥有任意数量的 属性,任何值都可以传递给任何 属性。
- data必须写成函数,使各组件之间空间独立,数据互不影响。
如data(){ return { 属性名:属性值 } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件传参-父传子</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- vue实例中的属性 -->
<p v-text="name2"></p><hr>
<!-- 父传参给子 ,使用v-bind 绑定属性的方式 ,
下面的pages与num是绑定的自定义属性-->
<my-component :pages="10" :num="100"></my-component>
<!--使用v-bind指令绑定对象或数组的值-->
<my-component v-for="elf in arrs" :key="elf.id" v-bind:username="elf.username"></my-component>
</div>
<script>
// 自定义全局组件
Vue.component("my-component",{
props:["pages","num","username"],
template:`<div>
<div>{
{name1}}</div>
<div>{
{pages}}</div>
<div>{
{num}}</div>
<div>{
{username}}</div>
</div>`,
// data必须写成函数,使各组件之间空间独立,数据互不影响
data(){
return {
// name1是自身的属性
name1:"我是自身的属性值啊"
}
}
});
let app =