父組件向子組件傳值:
<!--父組件通過屬性傳遞msg給子組件,常量和變量方式不同-->
<helloworld msg="常量值"> </helloworld>
<helloworld v-bind:msg="變量名"> </helloworld>
<!--子組件接收,msg可以在頁面中直接使用,js中通過this.msg調(diào)用-->
<script>
export default {
name: 'HelloWorld',
data() {
return {
message:"啦啦啦"
}
},
//在props中聲明
props:['msg']
}
</script>
子組件向父組件傳值:
<!--子組件觸發(fā)事件時通過$emit傳遞消息-->
<template>
<div>
我是子組件
<button v-on:click="callPhone">瘋狂打call</button>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {
news: "有人打我!!!"
}
},
methods: {
callPhone: function () {
this.$emit('事件名', this.news)
}
}
}
</script>
<!--父組件通過v-on:"事件名"指令接收-->
<child v-on:call="phone"></child>
export default {
el:"#app",
methods: {
phone:function (msg) {
alert(msg)
}
}
}
