父组件向子组件传值
父组件向子组件传递普通数据
- 把要传递给子组件的数据，作为 自定义属性，通过
v-bind: 绑定到子组件身上：
<com1 :msg123="parentMsg"></com1>
- 在子组件中，不能直接使用父组件传递过来的数据，需要先使用
props 数组来接收一下：
props: ['msg123']
- 注意：在接收父组件传递过来的 props的时候，接收的名称，一定要和父组件传递过来的自定义属性，名称保持一致！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件如果想要给子组件传递数据，则需要使用属性绑定的形式 -->
<!-- 这样，子组件身上的 自定义数据，就是你要传递给子组件的数据 -->
<com1 :msg="parentMsg"></com1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
parentMsg:'哈哈，你是想笑死我，然后继承我的花呗吗？'
},
methods:{},
components:{
'com1':{
template:`
<div>
<h3>这是子组件中的标题：{{msg}}</h3>
</div>
`,
props:["msg"]
}
}
})
</script>
</body>
</html>
父组件向子组件传递方法
- 把要传递给子组件的方法，作为 自定义事件，通过
v-on: 绑定到子组件身上：
<com1 @func="show"></com1>
2.在子组件中，不能直接使用父组件传递过来的方法，需要先使用 $emit来触发自定义事件：
this.$emit("func",this.sonMsg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 1.如果要向子组件传递 data 中的数据，则 使用 属性绑定的形式 v-bind -->
<!-- 2.如果要向子组件传递 methods 中的 方法，则 使用 事件绑定的形式 v-on: -->
<com1 @func="show"></com1>
<p> msgFormSon: {{msgFormSon}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msgFormSon:''
},
methods:{
show(arg1){
this.msgFormSon = arg1;
}
},
components:{
'com1':{
template:`
<div>
<!-- 当点击子组件的 按钮时候，调用一下 父组件传递过来的 func 方法 -->
<input @click="btnClick" type="button" value="这是子组件的按钮">
</div>
`,
data(){
return {sonMsg:"这是子组件中的数据"}
},
methods:{
btnClick(){
this.$emit("func",this.sonMsg);
}
}
}
}
})
</script>
</body>
</html>
|