父组件向子组件传值
<!--父级传值子组件-->
<script>
export default {
data(){
return {
name:"隔壁老王",
hobby:this.msg,
};
},
props:['msg'],
methods:{
change(){
this.hobby='香蕉';
},
},
mounted() {
console.log(typeof this.msg)
},
};
//属性传值
</script>
父组件
<template>
<HelloWorld msg="苹果" namespace="Hello World" typerE/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld,
},
};
</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>
<h1>{{mess}}</h1>
<hr>
<HelloWorld msg="苹果" :transmit="transmit"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
mess:"",
};
},
components: {
HelloWorld,
},
methods: {
transmit(i){
this.mess = i;
},
},
};
</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>
<h1>{{ name }}</h1>
<h1 @click="change"> {{hobby}}</h1>
</div>
</template>
<!--父级传值子组件-->
<script>
export default {
data(){
return {
name:"邻居姓王",
hobby:this.msg,
};
},
props:['msg','transmit'],
methods:{
change(){
this.hobby='香蕉';
},
},
mounted() {
console.log(typeof this.msg);
this.transmit(this.name);
},
};
//属性传值
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin: 40px 0 0;
color: #2c3e50;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>