html中vue的組件傳值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./lib/vue.js"></script>
<body>
<div id="container">
<son-button @fun="fatherHandler" :msg='msg'></son-button>
</div>
<template id='son'>
<div>
<input type="button" value="子組件Button" @click="sonClick">
<h4>{{msg}}</h4>
</div>
</template>
</body>
<script>
Vue.component(
'son-button',
{
template : "#son",
data () {
return {
}
},
// 調用父組件中的data必須使用props數組進行聲明
props: ["msg"],
methods: {
sonClick(){
// 子組件調用父組件的方法
// 第二個參數以及之后負責向調用的父組件函數傳遞數據
this.$emit('fun'," and son")
}
}
}
)
var app = new Vue({
el : "#container",
data : {
msg : "我是父組件中的msg"
},
methods: {
fatherHandler(data){
// 父組件調用子組件的數據
console.log("father" + data)
}
}
})
</script>
</html>
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。