vue 局部组件
小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件</title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>局部组件</h1>
<step :p1="n1"></step>
<step :p1="n2"></step>
<step :p1="8"></step><!-- 也可以直接给数据 -->
<step></step>
<!-- 在父组件内 通过属性绑定的方式 传入p1属性数据给子组件 -->
</div>
<script type="text/javascript">
var step ={
template:`<div>
{{p1}}
<input v-model="num">
<button @click="num--">-</button>
<button @click="num++">+</button>
</div>`,
data(){
return {num:1}
},
created(){this.num=this.p1},//给num 的初始值为获取的值
//props:["p1"],
props:{
"p1":{
type:Number,//指定类型必须是数字，，还可以选Boolean,String,Array,Object等
default:1,
}
}//推荐使用这种方法
//组件内部通过props的方法接收怕属性
//props的值是只读的，不要修改
//在vue里面组件的数据流向是单向的
//为什么需要单向数据流？保持各组件独立性 A组件修改B组件是不可行的
//组件中的data必须是函数，也是为保持各组件数据的独立性
}
new Vue({
el:"#app",
components:{step},
data:{
n1:100,
n2:999,
}
})
</script>
</body>
</html>
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
