父组件向子组件里传参,props的使用实例
例子一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>
<body>
<div id="hdcms">
<!--hd="abc"传递字符串 :show-title:加上冒号传递的就是一个变量了(注意驼峰命名和-号命名的写法) -->
<hd-news hd="abc" css="testcss" :list="news" :show-title="showTitle"></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致-->
</div>
<script type="text/x-template" id="hdNewstemplate">
<div>
<span>{{hd}}</span>
<span>{{css}}</span>
<li v-for="(v,k) in list">
{{v.title}}
<button v-if="v.show" @click="list.splice(k,1)">删除</button>
<input v-model="v.show" type="checkbox">显示删除按钮
<button v-if="!v.show" @click="v.show?v.show=false:v.show=true">显示删除按钮</button>
</li>
{{showTitle}}
</div>
</script>
<script>
var hdNews={
//绑定id="hdNews" 的 x-template模板
template:'#hdNewstemplate',
data(){
return {}
},
//用于接收父组件里传过来的数据,注意驼峰命名和-号命名的写法
props:['hd','css','list','showTitle'],
methods:{}
};
new Vue({
el:'#hdcms',
//绑定组件hdNews hdNews:hdNews简写成hdNews
components:{hdNews},
data:{
news:[
{id:0,title:'tpshop',num:1,show:false},
{id:1,title:'hdcms',num:1,show:false}
],
showTitle:'hello vue.',
},
});
</script>
</body>
</html>
效果:
例子二:
<!DOCTYPE html>
<html lang=”zh-cn”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<script type=”x-template” id=”father”>
<div>
<h2 style=”color:blue”>{{hello}}</h2>
{{apptoshuaiqm}}
<childer :shuai-qmtochilder=”shuaiQmGiveMe” />
</div>
</script>
<script type=”x-template” id=”childer”>
<div>
<h2 style=”color:blue”>{{hello}}</h2>
{{shuaiQmtochilder}}
</div>
</script>
<body>
<div id=”app”>
<shuai-qm apptoshuaiqm=”我是app传过来的值”></shuai-qm>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var childer = {
props: ['shuaiQmtochilder'],
data() {
return {
hello: 'hello i’m dawangraoming',
}
},
template: '#childer'
}
var father = {
props: ['apptoshuaiqm'],// 这里大家一定要注意，请完全使用小写传参
data() {
return {
hello: 'hello world',
shuaiQmGiveMe: '我是从shuaiQm传过来的值'
}
},
template: '#father',
components: {
'childer': childer
}
}
var app = new Vue({
el: '#app',
data: {
message: 'Hello World',
isTrue: true,
},
components: {
'shuaiQm': father,
}
})
</script>
</body>
</html>