子组件中，默认情况下无法访问到父组件中data上的数据和methods中的方法
父组件向子组件传值
- 定义子组件，props中设置需要父组件传入的参数名
- 子组件template中使用已经在props中设置的参数名
- 创建子组件时，通过属性绑定，设置需要传入的参数
- 注意：props中的参数，都是通过父组件传递给子组件的，且都是只读的
<body>
<div id="app">
<!-- 创建组件时，通过属性绑定，设置需要传入的参数 -->
<com1 :parentmsg="msg"></com1>
</div>
<template id="temp1">
<div>
<!-- 使用父组件传入的参数 -->
<p>子组件-{{parentmsg}}</p>
</div>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "这是父组件的内容"
},
components: {
com1: {
template: "#temp1",
// 设置需要父组件传入的参数名
// 注意：props中的参数，都是通过父组件传递给子组件的，且都是只读的
props: ["parentmsg"]
}
}
})
</script>
</body>
父组件向子组件传递方法
- 创建子组件时，通过方法绑定，设置需要传入的方法
- 在子组件内部，通过this.$emit调用
- emit英文意思：触发，调用
<body>
<div id="app">
<!-- 方法绑定，事件名func，func1都是自定义的，可以随意取 -->
<com1 @func="show" @func1="show1"></com1>
</div>
<template id="temp1">
<div>
<input type="button" value="点击" @click="myclick" />
</div>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
methods: {
show() {
alert("这是父组件不带参数的方法")
},
show1(arg1) {
alert("这是父组件带参数的方法，传递的参数：" + arg1)
}
},
components: {
com1: {
template: "#temp1",
methods: {
myclick() {
// 调用父组件传递的无参方法
this.$emit("func")
// 调用父组件传递的有参方法
// emit 第一个参数：事件名，之后的参数：方法参数
this.$emit("func1", "子组件传递的参数")
}
}
}
}
})
</script>
</body>
子组件向父组件传值
借助父组件向子组件传递方法实现
<body>
<div id="app">
<!-- 方法绑定，事件名func1都是自定义的，可以随意取 -->
<com1 @func1="show1"></com1>
</div>
<template id="temp1">
<div>
<input type="button" value="点击" @click="myclick" />
</div>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
sonmsg: ""
},
methods: {
show1(arg1) {
// 把参数赋值给data中的参数
this.sonmsg = arg1
alert(this.sonmsg)
}
},
components: {
com1: {
template: "#temp1",
methods: {
myclick() {
// 调用父组件传递的有参方法
// emit 第一个参数：事件名，之后的参数：方法参数
this.$emit("func1", "子组件传递的参数")
}
}
}
}
})
</script>
</body>
