子组件如果想修改父组件的属性是不可能的, 也不推荐, 不能直接改难道就没有办法呢
难不了,优秀的vue 同学 ,先看张图吧
从这张图 可以看出两个问题
1.父传值给子 需要用 props ,
2. 子传值给父 需要 emit 事件.
看下边实例吧,我自己学的 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
</head>
<body>
<div id="pp" >
<!--把父组件的方法绑定到func-->
<login v-bind:parmsg="msg" @func="show"></login>
</div>
<template id="tmp1">
<!--调用了子组件的myclick方法-->
<input type="button" value="请点击" @click="myclick" >
</template>
<div>
<script>
var login= { // 设置子组件对象
template:'#tmp1',
props:['parmsg'],
data(){
return {
son:{
name:30,
age:20
}
}
},
methods: {
myclick(){ //定义子方法
this.$emit('func',this.son) //通过emit 进行把值传入func
}
}
}
var vue=new Vue({
el:'#pp',
data: {
son:'',
msg:'我是父组件'
},
methods:{
show(data){
alert(data.name)
alert(data)
this.son=data
alert("传递的值"+this.son.age)
}
},
components:{ //创建子组件
login: login,
}
}
)
</script>
</div>
</body>
</html>