Vue组件化基础-全局组件-局部组件

认识组件化开发

组件化开发

Vue的组件化

注册组件的方式

注册全局组件

   <div id="app">
     <!-- 使用product-item组件 -->
     <product-item></product-item>
     <product-item></product-item>
     <product-item></product-item>
     <product-item></product-item>

    </div>
    <!-- 组件product-item的模板 -->
     <template id="item">
      <div class="product">
        <h2>我是商品</h2>
        <div>商品图片</div>
        <div>商品价格:<span>&yen;9.9</span></div>
        <p>商品描述信息,9.9秒杀</p>
       </div>
     </template>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 1.组件:App组件(根组件)
    const App = {}
    // 2.创建app
    const app = Vue.createApp(App)
    // 3.开发product-item组件
    // const productItem = {
    //   template:`
    //   <div class="product">
    //   <h2>我是商品</h2>
    //   <div>商品图片</div>
    //   <div>商品价格:<span>&yen;9.9</span></div>
    //   <p>商品描述信息,9.9秒杀</p>
    //  </div>
    //  `
    // }
    
    // 4.注册全局组件
    app.component("product-item",{
    //   template:`
    //   <div class="product">
    //   <h2>我是商品</h2>
    //   <div>商品图片</div>
    //   <div>商品价格:<span>&yen;9.9</span></div>
    //   <p>商品描述信息,9.9秒杀</p>
    //  </div>
    //  `
      template:"#item"
    })
    // 挂载app
    app.mount("#app")
  </script>

全局组件的逻辑

组件的名称

注册局部组件

    <div id="app">
    <home-nav></home-nav>
    <product-item></product-item>
    <product-item></product-item>
    <product-item></product-item>

  </div>
  <template id="nav">
    <div>-------------------nav start-----------------</div>
    <h1>{{content}}</h1>
    <product-item></product-item>
    <div>-------------------nav end-----------------</div>
  </template>
  <template id="item">
    <h1>{{title}}</h1>
    <h1>{{desc}}</h1>
    <h1>{{price}}</h1>
    <button @click="favarItem">收藏</button>
  </template>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    const productItem = {
          template:"#item",
          data(){
            return{
              title:"我是商品标题",
              desc:"我是商品描述",
              price:"我是商品价格"
            }
          }
        }
    // 创建app
    //1.1组件打算在哪里被使用
    const app = Vue.createApp({
      //components:option api
      // 局部组件注册
      components:{
        // 注册"product-item"组件
        "product-item":productItem,
          methods:{
            favarItem(){
              console.log("收藏了")
            }
          },
          //注册"home-nav"组件
        "home-nav":{
          template:"#nav",
          data(){
            return{
              content:"我是头部内容"
            }
          },
          components:{
            // 注册product-item组件
            "product-item":productItem,
          }
        },
      }, 
      data(){
        return{
          message:"Hello Vue"
        }
      }
    })
    // 挂载app
    app.mount("#app")
  </script>