1. 父组件向子组件传值
1.1. 组件内部通过props接收传递过来的值
Vue.component('menu-item', {
props: ['title'],
template: '<div>{{title}}</div>'
});
1.2. 父组件通过属性将值传递给子组件
<menu-item title='来自父组件的title'></menu-item>
<menu-item :title='ptitle'></menu-item>
1.3. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父组件向子组件传值</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<!-- title直接传递数据 :title使用绑定数据 -->
<menu-item title='来自父组件的title'></menu-item>
<menu-item :title='ptitle' content='来自父组件的content'></menu-item>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
Vue.component('menu-item', {
props: ['title', 'content'],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '<div>{{msg + "--->" + title + "--->" + content}}</div>'
});
var vm = new Vue({
el: "#app",
data: {
pmsg: '父组件中内容',
ptitle: '来自父组件动态绑定的title'
}
});
</script>
</body>
</html>
1.4. 效果图
2. props属性命名规则
2.1. 如果使用驼峰式命名props属性, 那么在使用属性的时候, 只能在字符串模板中用驼峰的方式使用属性, 但是在普通的标签模板中, 必须使用短横线的方式使用属性。
Vue.component('inner-com', {
props: ['innercomTitle'],
template: '<div>{{innercomTitle}}</div>' // 模板中需要使用驼峰式
});
<!-- 在html中是短横线方式 -->
<inner-com :innercom-title="ptitle"></inner-com>
2.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父组件向子组件传值命名规则</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<inner-com :innercom-title="ptitle"></inner-com>
<menu-item :content='pcontent'></menu-item>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
// 如果使用驼峰式命名props属性, 那么在使用属性的时候, 只能在字符串模板中用驼峰的方式使用属性, 但是在普通的标签模板中, 必须使用短横线的方式使用属性。
Vue.component('inner-com', {
props: ['innercomTitle'],
template: '<div>{{innercomTitle}}</div>'
});
Vue.component('menu-item', {
props: ['content'],
template: '<div><inner-com innercomTitle="我是title"></inner-com> {{content}}</div>'
});
var vm = new Vue({
el: "#app",
data: {
pmsg: '父组件中内容',
ptitle: '来自父组件动态绑定的title',
pcontent: '来自父组件动态绑定的content'
}
});
</script>
</body>
</html>
2.3. 效果图
3. props属性值类型
3.1. props属性值类型
3.1.1. 字符串String
3.1.2. 数字Number
3.1.3. 布尔值Boolean
3.1.4. 数组Array
3.1.5. 对象Object
3.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父组件向子组件传值-props属性值类型</title>
</head>
<body>
<div id="app">
<menu-item :str='pstr' :num='pnum' :boo='pboo' :arr='parr' :obj='pobj'></menu-item><hr />
<menu-item str='字符串' num='123' boo='true'></menu-item>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
Vue.component('menu-item', {
props: ['str', 'num', 'boo', 'arr', 'obj'],
template: `
<div>
<div>{{str}} {{typeof str}}</div>
<div>{{num}} {{typeof num}}</div>
<div>{{boo}} {{typeof boo}}</div>
<div v-if="arr != undefined">
<div v-if="Array.isArray(arr)">array</div>
<ul v-for="(item, index) in arr">
<li>[{{index}}] {{item}}</li>
</ul>
</div>
<div v-if="arr != undefined">
<div>{{typeof obj}}</div>
<ul v-for="(v, k, index) in obj">
<li>[{{index}}] {{k}}: {{v}}</li>
</ul>
</div>
</div>
`
});
var vm = new Vue({
el: "#app",
data: {
pstr: '字符串',
pnum: 123,
pboo: true,
parr: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计"],
pobj: {id: 1001, name: "JavaScript权威指南"},
}
});
</script>
</body>
</html>
3.3. 效果图