1.代码
<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app">
<todo-item v-bind:todo="todo1"></todo-item>
</div>
<script>
const ListRendering = {
data() {
return {
todo1:'传递参数'
}
}
}
// 创建一个Vue 应用
const app = Vue.createApp(ListRendering)
// 定义一个名为 todo-item 的新全局组件
app.component('todo-item', {
props: ['todo'],
template: `<p>{{ todo}}</p>`
})
app.mount('#todo-list-app')
</script>2.运行结果
3.备注
注：这里<todo-item v-bind:todo="todo1"></todo-item>的"todo1"必须是来自组件的变量名，如果想直接赋值是不行的。
文章来源：https://www.toymoban.com/news/detail-671448.html
文章来源地址https://www.toymoban.com/news/detail-671448.html
到了这里，关于vue 简单实验 自定义组件 传参数 props的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
