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

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

<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:"
  • {{content}}
  • "
    //模板里面必须使用插值表达式获取content的值 代替了
      里面的
    • }) 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:"
  • {{content}}
  • " //模板里面必须使用插值表达式获取content的值 代替了
      里面的
    • // }) //2.1 局部组件 本质上是一个对象 var TodoItem ={ props:['content'], template:"
    • {{content}}
    • " } 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>

    你可能感兴趣的:(Vue)