溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
父傳子：
1、父用子的時候通過屬性傳遞
2、子要聲明props:['屬性名']接收
3、子組件template中直接用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
// 父傳子
var child = {
template: `
<div>我是子組件
{{sendToChild}}
</div>
`,
props: ['sendToChild']
}
var parent = {
template: `
<div>我是父組件
<child sendToChild="send"></child>
</div>
`,
components: {
child
}
}
new Vue({
el: '#app',
template: `
<div>
<parent></parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
// 父傳子
var child = {
template: `
<div>我是子組件
{{sendToChild}}
</div>
`,
props: ['sendToChild']
}
var parent = {
template: `
<div>我是父組件
<child v-bind:sendToChild="send"></child>
</div>
`,
components: {
child
},
data() {
return {
send:
{name: 'zhangsan', age: 12}
}
}
}
new Vue({
el: '#app',
template: `
<div>
<parent></parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>子傳父：1、子組件里通過this.$emit('自定義事件名','變量1','變量2')觸發
2、父組件里通過@自定義事件名='事件名'監聽
br/>1、子組件里通過this.$emit('自定義事件名','變量1','變量2')觸發
2、父組件里通過@自定義事件名='事件名'監聽
<child @hellobaba="myaccept"></child>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
// 子傳父
var child = {
template: `
<div>我是子組件
<button @click="sendToParent">點我送禮物給爸爸</button>
</div>
`,
methods:{
sendToParent(){
// 子傳父表達式this.$emit('父組件接收事件名','參數1','參數2')
this.$emit('hellobaba','給你帶個蘋果','給你帶個梨')
}
}
}
var parent = {
// 父組件中@子傳入事件名進行監聽
template: `
<div>我是父組件
<child @hellobaba="myaccept"></child>
兒子給我：{{param1}},{{param2}}
</div>
`,
components: {
child
},
data(){
return {
param1:'',
param2:''
}
},
methods: {
myaccept(val1,val2){
this.param1 = val1
this.param2 = val2
}
}
}
new Vue({
el: '#app',
template: `
<div>
<parent></parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
