您当前的位置：学无止境 > vue父子组件通信传值网站首页学无止境
vue父子组件通信传值
发布时间：2022-12-14 15:48:25编辑：三青查看次数：185
父=>子 组件通信传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<art-list :art="arts"></art-list>
</div>
<script>
var articles = {
template:`
<ul>
<li v-for="item,index in art" :key="index">
<h1 :title="item.title">{{item.title}}</h1>
<p>{{item.content}}</p>
</li>
</ul>
`,
props:['art']
}
const App = {
components: {
'art-list':articles
},
data() {
return {
arts:[]
}
},
created() {
this.arts = [
{title:'art title',content:'art content',author:'sanqing'},
{title:'art title2',content:'art content2',author:'sanqing2'}
]
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>子=>父 组件通信传值 （注意：函数名尽量不要有大写字母）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<art-list :ar="arts" @ctitle="ctit"></art-list>
被选中的文章标题：{{msg}}
</div>
<script>
var articles = {
template:`
<ul>
<li v-for="item in ar">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
<button @click="$emit('ctitle',item.title)">选中</button>
</li>
</ul>
`,
props:['ar']
}
const App = {
data() {
return {
msg:'',
arts:[]
}
},
components: {
'art-list':articles
},
created() {
this.arts = [
{title:'art title',content:'art content',author:'sanqing'},
{title:'art title2',content:'art content2',author:'sanqing2'}
]
},
methods: {
ctit(aa){
this.msg = aa
}
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>关键字词：vue,父子,组件,通信,传值,通信,props,$emit,emit
下一篇：vue插槽的简单使用
评论：
