我们可以使用prop进行“父->子”的数据通信
代码中将当父组件”nameValue的值传递给子组件”name”
子组件通过props来接收数据:
- 方式1：
props: ['name']- 方式2 :
props: {
name:String
}- 方式3：
props:{
name:{
type:String,
default:'helo,js'
}
}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<my-title v-bind:name="nameValue"></my-title>
</div>
<script>
Vue.component('my-title', {
/*props: ['name'],*/
/*props: {
name:String
},*/
props:{
name:{
type:String,
default:'helo,js'
}
},
template: '<div>{{name}}</div>'
});
let app = new Vue({
el: '#app',
data:{
nameValue: 'hello vue'
}
});
</script>
</body>
</html>