Vue的父与子 奇淫技巧 子传父
内容：
- 全局组件：公有儿子
- 父组件 传递信息给 儿子
- 静态绑定：
- 动态绑定：
- 子组件向父组件传递信息
- 方法一：
- 方法二：通过将父元素的执行函数传递到子组件，让子组件代替父元素执行
- 方法三：子组件通过使用 $parent属性 偷窥父元素
全局组件：公有儿子
父组件 传递信息给 儿子
静态绑定：
动态绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<product v-for="item in prolist" :prolist="item"></product>
</ul>
</div>
<script type="text/javascript">
let con1 = Vue.component('product',{
props:['prolist'],
template:`
信息：{{prolist.title}}
价格：{{prolist.price}}
`
})
let app = new Vue({
el:'#app',
data(){
return{
prolist:[
{
title:"产品1",
price:"82Yuan"
},
{
title:"产品2",
price:"83Yuan"
},
{
title:"产品3",
price:"84Yuan"
},
{
title:"产品4",
price:"85Yuan"
},
]
}
},
methods:{
},
components:{
con1
}
})
</script>
</body>
</html>
子组件向父组件传递信息
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<product v-for="item in prolist" :prolist="item" @customname="getinfo"></product>
</ul>
<h2>选中的产品是：{{childback}}</h2>
</div>
<script type="text/javascript">
let con1 = Vue.component('product',{
props:['prolist'],
template:`
信息：{{prolist.title}}
价格：{{prolist.price}}
`,
methods:{
childclick(protitle){
//自定义事件
this.$emit('customname',protitle)
}
}
})
let app = new Vue({
el:'#app',
data(){
return{
prolist:[
{
title:"产品1",
price:"82Yuan"
},
{
title:"产品2",
price:"83Yuan"
},
{
title:"产品3",
price:"84Yuan"
},
{
title:"产品4",
price:"85Yuan"
},
],
childback:'无'
}
},
methods:{
getinfo(data){
this.childback = data
}
},
components:{
con1
}
})
</script>
</body>
</html>
方法二：通过将父元素的执行函数传递到子组件，让子组件代替父元素执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<product v-for="item in prolist" :prolist="item" :action="getinfo" ></product>
</ul>
<h2>选中的产品是：{{childback}}</h2>
</div>
<script type="text/javascript">
let con1 = Vue.component('product',{
props:['prolist','action'],
template:`
信息：{{prolist.title}}
价格：{{prolist.price}}
`,
methods:{
childclick(protitle){
this.action(protitle)
}
}
})
let app = new Vue({
el:'#app',
data(){
return{
prolist:[
{
title:"产品1",
price:"82Yuan"
},
{
title:"产品2",
price:"83Yuan"
},
{
title:"产品3",
price:"84Yuan"
},
{
title:"产品4",
price:"85Yuan"
},
],
childback:'无'
}
},
methods:{
getinfo(data){
this.childback = data
}
},
components:{
con1
}
})
</script>
</body>
</html>
方法三：子组件通过使用 $parent属性 偷窥父元素
那我还想再懒一点！！！！
再简
除了$parent 之外 这里使用$root一样可以达到效果，因为这里的parent就时root 当组件之间嵌套很深的时候，子组件淹没在充满爸爸人群里却想要一下子找到祖宗的时候，可以使用$root
父组件可以用过$children来操作子组件，偷偷康康子组件发育的怎么样，哈哈，其实并不是很推荐这种方式，最好还是使用props属性来传值
最后还是要根据实际情况进行使用，低耦合！等等