<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<number num3="10"></number>
<!-- 如果定义了default,可以不传num2-->
<number num2='9' num3="10"></number>
<!-- 如果<number ：num2='9' num3="10"></number>，那么传过来的就是数值类型了-->
<!-- 就是num前面加冒号，因为v-bind的时候就把它转换为一个对象了-->
<number :num2=number2 num3="10"></number>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
//父组件向子组件传值，存在单项数据流
//如果子组件修改父组件传递过来的值，会回传给父组件，当其他组件影响了父组件，会
//影响其他子组件，所以要在子组件定义自己的值,引用自己的值
// props:['num2','num3'],
//这是接收父组件传过来的值
props:{
'num2':{
type:[Number],
default:'200',
required:true
// 是否必传，不能跟default连用
}
},
//prop还可以接收字典格式，传过来值为key,还可以有default值，还可以进行判断
//在<number num3="10"></number>不传num2值的情况下，默认200
//还可以定义传过来的值的类型
template:'<div>子组件<span @click="add">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
add:function () {
this.count=100
}
}
})
new Vue({
el:"#app",
data:{
number2:99
},
})
</script>
</body>
</html>
vue7:父组件向子组件传值
猜你喜欢
转载自www.cnblogs.com/liulilitoday/p/13369926.html
今日推荐
周排行