vue 简单实验 自定义组件 传参数 props

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"必须是来自组件的变量名，如果想直接赋值是不行的。