第一步：子类向父类传值
在java中父类是可以将值传给子类的，但是却不能从子类拿到值，同理子类是可以将父类的值拿到手，但是却不能将自己的值传给父类
而在vue中，子类和父类之间是不允许传值的但是，我们可以利用关联和引用来让他们之间建立起一些联系
子类向父类传值要使用$emit方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
</head>
<body>
<!-- 子传父：逆传值 -->
<div id="box">
<parent></parent>
</div>
<template id="tt1">
<div>
<child @rrt="fn2()"></child>
</div>
</template>
<template id="dd1">
<div>
<img src="images/6.png">
<span>首页</span>
<span @click="fn1()">{{msg}}</span>
</div>
</template>
<script>
var vm=new Vue({
el:"#box",
data:{},
components:{
"parent":{
template:"#tt1",
methods:{
fn2:function(){
console.log("dfghj")
}
},
components:{
"child":{
template:"#dd1",
data:function(){
return{
msg:"你好"
}
},
methods:{
fn1:function(){
this.$emit("rrt")
}
}
}
}
}
}
})
</script>
</body>
</html>为了方便理解，我们就从父类开始分析他们之间的联系
1首先父类定义了一个用来接收子类准备返回值的方法——fn2（）该方法触发按钮和事件，它只是等待子类使用emit方法来触发它
2然后我们给该方法取了个别名绑定到一个叫做@rrt的方法名上，该不处理是在父类组件中引用子类组件的时候传递给子类组件的
3然后子类组件中有一个方法叫做fn1()，该方法是由button按钮触发的，但我们点击按钮的时候，该方法体内部的
this.$emit("rrt")会绑定父类fn2()方法，通过点击“你好”，打印出dfghj
步骤不多：一共就是父类监听，然后取个别名传给子组件，子组件使用emit调用别名，并返回值给父类监听方法
第二步：父组件向子组件传递值
这种就比上一种还要简单点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
</head>
<body>
<!-- 父传子 -->
<div id="box">
<parent v-bind:mess="msg">
</parent>
</div>
<template id="tt2">
<div>
<h1 v-bind:message="mess">父类文字内容{{mess}}<child></child></h1>
</div>
</template>
<template id="dd2">
<h2>子类文字内容{{message}}</h2>
</template>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:"仙剑奇侠传"
},
components:{
"parent":{
template:"#tt2",
props:["mess"],
components:{
"child":{
/*props与template或el同一地位*/
template:"#dd2",
props:["message"],
}
}
}
}
})
</script>
</body>
</html>这里我们所做的就是将最外围的vue的msg值传递到最里层的子组件中去
我们第一步将值从vue传递到父组件，在div#box中引用父组件的时候，就将msg去个别名赋给：mess
然后父组件定义props：【“mess”】接收了该值，然后在父组件的template中引用子组件的标签的时候将mess取个别名
：message=”mess“,同理子啊子组件的props：【”message“】也定义了一番，然后就可以在子组件的template中直接使用{{message}}来接收来自父组件的值了。