标签：一个 ops strong 声明变量 按钮 数据 接收 http style
在vue开发中，我们经常需要在子组件使用父组件的数据，父组件使用子组件的数据，其实vue提供了这两个方法。
1.子组件向父组件传值，
在父组件内声明变量，子组件接受用props：
例如.父组件：
<template> <div> {{message }}{{num}} <br /> <hello :num="num"></hello> </div> </template> <script> import hello from "@/components/HelloWorld" export default { data(){ return{ message:"我是父组件我要传的值是：", num:10, } }, components:{ hello } } </script>
注册组件后在组件标签绑定你要传的值。
子组件
<template>
<div>
{{message}}{{num}}
</div>
</template>
<script>
export default {
//接受父元素的值用props
props:["num"],
data(){
return{
message:"我是子组件我接受的值是：",
}
},
}
</script>
子组件用props接受。结果如图所示
2.子组件向父组件传值
先在子组件定义，用$emit(),接受两个参数，一个是事件名，也就是绑定在父组件的事件，第二个是传的值，我把这个方法绑定在一个button按钮上，点击按钮传值。
子组件：
<template>
<div>
{{message2}}{{count}}
<br />
<button @click="chuanzhi">像父组件传值</button>
</div>
</template>
<script>
export default {
data(){
return{
message2:"我是子组件我要传的值是：",
count:20
}
},
methods:{
chuanzhi(){
//向父元素传值用$emit
this.$emit("child",this.count);
}
}
}
</script>
父组件先定义一个空值num2，当点击的时候去用num2接收子组件传过来的值，把子组件的方法绑定在注册的子组件标签上。代码如下
父组件：
<template>
<div>
{{message }}{{num2}}
<br />
<hello @child="getvalue"></hello>
</div>
</template>
<script>
import hello from "@/components/HelloWorld"
export default {
data(){
return{
message:"我是父组件我接受的值是：",
num2:‘‘
}
},
components:{
hello
},
methods:{
getvalue(val){
this.num2=val;
}
}
}
</script>
点击按钮，父组件接受的值为20.
标签：一个 ops strong 声明变量 按钮 数据 接收 http style
原文地址：https://www.cnblogs.com/zhupanpan/p/9606064.html
