Vue 组件化思想 --- 全局组件与局部组件 Vue.component、props:['content']、template、v-bind:等的使用_综合

在这里插入图片描述

<body><!-- 组件化思想 全局组件 --><div id="root"><div><input type="text" v-model="todoValue"><button v-on:click="handleBtnClick">提交</button></div><ul><!--<li v-for="item in list">{
    {
    item}}</li>--><!-- v-bind:为todo-item这个（相对于root来说）子组件传入绑定值我们在循环list时，list的每一项的值赋给了item,然后将item 通过v-bind的形式 传给了todo-item的 content因此后面需要在全局组件中定义content来接收值通过list决定输出多少个todo-item把list每一个项的内容通过v-bind语法 借助content变量传给了todo-item子组件--><!-- 由于已经定义了全局组件，所以这里可以直接使用 --><todo-item v-bind:content="item"  v-for="item in list"></todo-item></ul></div><script>//创建一个全局组件todo-item Vue.component是Vue提供的一个创建全局组件的方法Vue.component("TodoItem",{
    //用content接收组件todo-item传来的值 也即是接收到了list每一项的值props:['content'],  template:"<li>{
    {content}}</li>"   //模板里面必须使用插值表达式获取content的值 代替了<ul>里面的<li> })var app=new Vue({
    el:'#root',data:{
    list: [],todoValue:''},methods:{
    handleBtnClick:function () {
    this.list.push(this.todoValue)this.todoValue='';}}});</script>
</body>

下面是局部组件的使用：

<script>//1.创建一个全局组件todo-item Vue.component是Vue提供的一个创建全局组件的方法// Vue.component("TodoItem",{
    // //用content接收组件todo-item传来的值// props:['content'],//// template:"<li>{
    {content}}</li>" //模板里面必须使用插值表达式获取content的值 代替了<ul>里面的<li> // })//2.1 局部组件 本质上是一个对象 var TodoItem ={
    props:['content'],template:"<li>{
    {content}}</li>"}var app=new Vue({
    el:'#root',//2.2 注册局部组件 到 根Vue实例中components:{
    TodoItem:TodoItem},data:{
    list: [],inputValue:''},methods:{
    handleBtnClick:function () {
    this.list.push(this.inputValue)  //使用this.list: vue会自动去data里面找list属性this.inputValue='';//使用this.inputValue: vue会自动去data里面找inputValue属性}}});</script>