簡介
此頁面可以直接複製運行，包含以下應用：
Vue slot插槽使用Vue v-model使用Vue props使用- 父子組件數據傳遞
element-ui使用- HTML方式註冊子組件，可以將子組件數據寫在一個js文件中，用標籤引入，然後將子組件對象置入
components中
Live Demo 在線示例
提示
不建議用HTML模式開發項目，建議使用vue-cli3創建項目，使用單文件組件模式開發
Vue cli3
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">
<style>
#app{
display: flex;
justify-content: space-between;
}
.parent, .child{
width: 45%;
}
.el-card{
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="parent">
<el-card>
<div slot="header">
<span>父組件</span>
</div>
<el-input v-model="ParentMsg"></el-input>
<el-button type="primary" @click="changeChild" style="margin-top: 30px">改變子組件的msg</el-button>
</el-card>
</div>
<div class="child">
<el-card>
<div slot="header">
<span>子組件</span>
</div>
<child1 v-show="display" :parent-msg="childMsg"></child1>
<child2 @change-data-from-child="changeParent"></child2>
</el-card>
</div>
</div>
<script>
new Vue({
el: '#app',
data(){
return {
display:true,
ParentMsg:"Hello This is Parent",
childMsg: 'Hello, 我來自父組件的數據'
}
},
methods: {
changeParent(data){
this.ParentMsg = data
},
changeChild(){
this.childMsg = '我被父組件改變了'
}
},
components: {
'child1': {
props: { //定義子組件的prop，用於父組件傳遞數據到子組件
parentMsg: {
type: String,
default: ''
}
},
template: '<div>\n' +
' <h2 v-show="msgDisplay">{{msg}}</h2>\n' +
' <p>{{parentMsg}}</p>\n' +
' <el-button @click="toggleMsgDisplay" type="success">切換子組件1中的信息顯示隱藏</el-button>\n' +
' </div>',
data() {//Vue中component的data必須通過function() return
return {
msg: 'This is a Child Component1!',
msgDisplay: true
}
},
methods: {
toggleMsgDisplay() {
this.msgDisplay = !this.msgDisplay
}
}
},
'child2':{
template:"<el-button type='primary' @click='changeParentData' style='margin-top: 30px'>我是子組件2按鈕,點擊改變父組件內容</el-button>",
data () {
return {
msg:"點擊了子組件2按鈕"
}
},
methods:{
changeParentData () {
this.$emit('change-data-from-child', '我來自是子組件2') //事件傳遞用kebab-case風格
}
}
}
},
})
</script>
</body>
</html>