1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit让父组件监听到自定义事件 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div :style="{fontSize:fontSize+'px'}">{{msg}}</div>
<!-- 模板需要使用短横线的形式 不用:绑定的话就是string类型 -->
<hello-word :param-Type="msg" :age="18" :bool="true" :arrayss="furit" :objs="objs" @bigsize="handle"></hello-word>
</div>
<script type="text/javascript">
Vue.component('hello-word',{
// 在props中使用驼峰形式,模板需要使用短横线的形式,字符串的模板中没有这个限制
props: ['paramType','age','bool','arrayss','objs'],
data:function(){
return{
}
},
// 字符串 String
// 数值 Number
// 布尔 Boolean
// 数组 Array
// 对象 Object
// 字符串的模板中没有这个限制
// typeof查看数据类型
// 子组件可以使用 $emit让父组件监听到自定义事件 。
template:
`
<div>
{{paramType}}
{{typeof paramType}}
{{age}}
{{typeof bool}}
<ul>
<li :key="index" v-for="(item,index) in arrayss">{{item}}</li>
</ul>
<span>{{objs.name}}</span>
<span>{{objs.intreduce}}</span>
<button v-on:click='$emit("bigsize")'>扩大字体</button>
</div>
`
});
new Vue({
el:"#app",
data:{
msg:"helloword",
furit:["apple","oranle","blanana"],
objs:{
name:"zzp",
age:"18",
intreduce:"hahaha"
},
fontSize:"10"
},
methods: {
handle:function(){
this.fontSize+=1;
}
},
})
</script>
</body>
</html>