Vue 父组件向子组件传值
demo代码 （vue.js v2.6.11）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id='app'>
<swq :cMessage='message' :clist='list'></swq>
</div>
<template id='t1'>
<div>
<h2>{{ cMessage }}</h2>
<ul v-for="item in clist" :key="item">
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
Vue.component(
'swq', {
template: '#t1',
// props: ['cMessage', 'clist']
props:{
cMessage:{
type:String,
default:'123'
},
clist:String
}
}
)
var vm = new Vue({
el: '#app',
data: {
message: '你好',
list: [1, 2, 3, 4, 5]
},
methods: {
}
})
</script>
</body>
</html>
准备工作
- 首先 vm 实例可以看做一个组件 ，这里我们把它看做父组件。
- 我们在他内部创建一个组件 swq ，这里我们把它看做子组件
- 我们需求是什么？ 组件 swq 获取到 vm 中 data 的数据
父组件向子组件传值 （使用props）
-
确定你要拿父组件什么数据？
- 我要拿vm中的：
message: '你好', list: [1, 2, 3, 4, 5] -
创建子组件
-
创建一个模板对象： （模板里面使用的变量名是我们注册时候props自定义的变量名）
<template id='t1'> <div> <h2>{{ cMessage }}</h2> <ul v-for="item in clist" :key="item"> <li>{{item}}</li> </ul> </div> </template> -
注册 （对象中添加props属性）
- 这里面 props,可以是数组，可以是对象,(一般用对象更好一点，用对象的形式还可以限制类型，设置默认值)
- 自定义变量名 例如
cMessage推荐采用小写，这里使用大写，是为了演示驼峰命名的问题。
Vue.component( 'swq', { template: '#t1', // props: ['cMessage', 'clist'] props:{ cMessage:{ type:String, default:'123' }, clist:String } } ) -
使用组件 （用v-bind:将父组件数据和我们子组件自定义的变量名关联起来）
<swq :c-message='message' :clist='list'></swq>
-
如果自定义变量名为驼峰命名的（有大写的），则在使用的时候 绑定数据的时候，改为小写加- <u>模板对象中的不需要改</u>
网友评论