<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
</head>
<body>
<div id="box">
<parent parnetmsg="自定义输入的值"></parent>
</div>
<!-- 父类组件模板 -->
<template id="fa">
<div>
<!-- props里的值也可以直接使用{{}} -->
父类组件的值：{{famsg}}，父类组件传值props：{{parnetmsg}}
<!-- 在父类组件模板里面使用props内的函数进行传值给子类，注意要用v-bind否则传的只是普通的字符串 -->
<child :message="famsg"></child>
</div>
</template>
<!-- 子类组件模板 -->
<template id="ch">
<div>子类组件的值：{{message}}</div>
</template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
components:{
/*父类组件*/
"parent":{
template:"#fa",
data:function(){
return {famsg:"吴师傅(父类值)"}
},
props:["parnetmsg"],
/*子类组件*/
components:{
"child":{
template:"#ch",
/*子类接受父类传的值就得用props*/
props:["message"]
}
}
}
}
});
</script>
</body>
</html>
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
