这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定。
父子组件传值
新建父组件和子组件
新建父组件
代码如下
<template>
<div id="app">
<div>
<ming></ming>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ming from './components/ming.vue'
export default {
name: 'App',
components: {
HelloWorld,
ming
},
data(){
return{
}
},
methods: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
新建子组件
代码如下
<template>
<div class="hello">
Hello World
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
目录结构
目录结构如下
子组件数据
这里新建子组件
<template>
<div class="hello">
Hello World
{{childValue}}
<input type="button" value="点击触发" @click="childClick"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
childValue: "我是子组件的数据"
}
},
props: {
},
methods: {
childClick(){
// childByValue 是父组件on监听的方法
// 第二个参数 是需要传的值
this.$emit("childByValue", this.childValue);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
新建父组件
传入参数如下
<template>
<div id="app">
<div>
<ming v-on:childByValue="childByValue"></ming>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ming from './components/ming.vue'
export default {
name: 'App',
components: {
HelloWorld,
ming
},
data(){
return{
name: ""
}
},
methods: {
childByValue: function (childValue) {
console.log(childValue)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
实践效果
核心
使用$emit方法调用父组件的方法,并把值进行传入
父子组件事件绑定
这里书写关于父子组件事件绑定 即父组件调用子组件的事件
书写父组件
<template>
<div id="app">
<div @click="fatherMethod">
<child ref="child"></child>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ming from './components/ming.vue'
import child from './components/child.vue'
export default {
name: 'App',
components: {
HelloWorld,
ming,
child
},
data(){
return{
name: ""
}
},
methods: {
childByValue: function (childValue) {
console.log(childValue)
},
ming: function () {
console.log("父组件事件")
this.$refs.child.ming();
console.log(this.$refs.child)
},
fatherMethod() {this.$refs.child.childMethods();
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
书写子组件
<template>
<div class="hello">
Hello World
{{childValue}}
<input type="button" value="点击触发" @click="xiaoming"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
childValue: "我是子组件的数据"
}
},
props: {
},
methods: {
xiaoming(){
console.log("我是子组件")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
文件目录
效果
小明菜市场
推荐阅读
● 实战 | Element UI 父子组件传值与事件绑定(正向)
● 实战 | Vue + Element UI 表格组件二次封装
● 应用 | Redis实现 主从,单例,集群,哨兵,配置应用
● 实战 | GitLab + Docker 实现多环境部署