Vue常用的三种传值方式有:
1.父传子
2.子传父
3.非父子传值
**1.父传子:**
父级:`
子級:`
{{mag}}
2.子传父
子級:
父級:
<template>
<div id="app">
<HelloWorld v-on:childByValue="childByValue"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
data(){
return{
// 子传父
name: ''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
},
components: {
HelloWorld,
Header,
Gradual,
List,
Patreon,
weekly,
Footer,
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>