2018-09-18vue父传子组件的几个案例
2018-09-22 本文已影响0人
萧声断未央
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
*****组件：组件可以扩展 HTML 元素，封装可重用的代码。
***组件之间的传值
-->
<script>
var uname='jack';
var age=18;
console.log('我的名字叫'+uname+','+'我的年龄是'+age+'岁');
console.log(`我的名字叫${uname},我的年龄是${age}岁了`);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<father></father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('father',{
template:`
<div>
<h1>这是父元素</h1>
<child v-bind:number='num'></child>
<button @click='add'>点击加1</button>
</div>
`,
data:function(){
return{
num:1
}
},
methods:{
add:function(){
this.num++;
}
}
})
Vue.component('child',{
props:['number'],
template:`
<div>
<h3>这是子元素</h3>
<a href='#'>{{number}}</a>
</div>
`
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<cont></cont>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('cont',{
template:`
<div>
<h1>这是父元素</h1>
<top-title v-bind:fruTit='tit'></top-title>
<list v-bind:fruList='fruit'></list>
</div>
`,
data:function(){
return{
fruit:['apple','pear','banana'],
tit:'水果列表'
}
}
})
//子组件1
Vue.component('top-title',{
props:['fruTit'],
template:`
<h3>{{fruTit}}</h3>
`
})
//子组件
Vue.component('list',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
水果列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-component",{
template:`
<div>
<input type='text' v-model='list'>
<button @click='add'>添加</button>
<my-child v-bind:fruit='fruList'></my-child>
</div>
`,
methods:{
add:function(){
this.fruList.push(this.list);
this.list=''
}
},
data:function(){
return{
fruList:['apple','pear','banana'],
list:''
}
}
})
Vue.component('my-child',{
props:['fruit'],
template:`
<ul>
<li v-for="(value,index) in fruit">
{{value}}
<button @click='delt(index)'>删除</button>
</li>
</ul>
`,
methods:{
delt:function(ind){
this.fruit.splice(ind,1)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- <p>{{msg}}</p>-->
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
//全局组件
// Vue.component('my-component',{
// template:`
// <div>
//
// </div>
// `
//
// })
new Vue({
el:'#app',
data:{
msg:'jdkfg'
},
methods:{},
computed:{},
filters:{},
components:{
'my-component':{
template:`
<div>
<p>
<a href='#'> 去百度</a>
</p>
</div>
`
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-component',{
template:`
<div>
<h1>{{msg}}</h1>
<button @click='alt'>点击按钮</button>
<my-child></my-child>
</div>
`,
data:function(){
return{
msg:'我是组件中的内容'
}
},
methods:{
alt:function(){
alert(11111)
}
}
})
Vue.component('my-child',{
template:`
<div>
<h3>我是第二个组件</h3>
<p>hbjhjhjbbhjjhbjhbjhbhbjhbjjhb</p>
</div>
`
})
new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
