父组件向子组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组建组件的方式</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--父组件向子组件传值,属性名称也需要使用- -->
<div id="app">
<my-component :parent-msg="msg"></my-component>
</div>
<template id="temp1">
<div>
<!--经过测试,子组件无法直接获取父组件中的data-->
<div>{{title}}</div>
<div>{{parentMsg}}</div>
<button @click="changeMsg">修改</button>
</div>
</template>
<script type="text/javascript">
var vue =new Vue({
el:"#app",
data:{
msg:'我是父组件中message'
},
components:{
'my-component':{
template:"#temp1",
data(){
return {
title:'我是标题'
}
},
//props中的数据都是通过父组件传给子组件的
//props中的数据都是只读的,无法直接赋值
//props建议使用对象,并给每一个props声明类型和默认值
props:{
parentMsg:{
type:String,
defult:null
}
},
methods:{
changeMsg(){
this.parentMsg="我被修改了"
}
}
}
}
})
</script>
</body>
</html>
父组件向子组件传递方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组建组件的方式</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--父组件向子组件传递方法 使用v-on
v-on 表示子组件调用方法的名称,值表示父组件传递的方法
这里也不能使用驼峰规则,建议也不要使用- ,这里的名称就使用单个单词
-->
<div id="app">
<div>{{msg}}</div>
<div>{{title}}</div>
<my-component @change="changeMsg">修改</my-component>
</div>
<template id="temp1">
<div>
<!--经过测试,子组件无法直接获取父组件中的data-->
<button @click="changeMsg">修改</button>
</div>
</template>
<script type="text/javascript">
var vue =new Vue({
el:"#app",
data:{
msg:'我是父组件中message',
title:'我是父组件的标题'
},
methods:{
changeMsg(msg,title){
this.msg=msg,
this.title=title
}
},
components:{
'my-component':{
template:"#temp1",
methods:{
changeMsg(){
this.$emit("change","修改了父组件的msg","修改了父组件的title")
}
}
}
}
})
</script>
</body>
</html>