10-組件化-有解無憂

組件化開發

在實際開發中，一個頁面的功能可能及其復雜，我們需要將其拆分成各個功能模塊組件，以此達到復用和方便管理的目的，
在這里插入圖片描述
例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件，

示例1.1：不使用組件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>不使用模板</title>
</head>
<body>
<div id="app">
  <h2>標題</h2>
  <p>內容一</p>
  <p>內容二</p>
  <p>內容三</p>

  <h2>標題</h2>
  <p>內容一</p>
  <p>內容二</p>
  <p>內容三</p>

  <h2>標題</h2>
  <p>內容一</p>
  <p>內容二</p>
  <p>內容三</p>

  <h2>標題</h2>
  <p>內容一</p>
  <p>內容二</p>
  <p>內容三</p>
</div>
</body>
</html>

示例1.2：使用組件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>組件化的基本使用</title>
</head>
<body>
<div id="app">
  <!--  3.使用組件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 1.創建組件
  const cpnC = Vue.extend({
    template: `
  <div>
      <h2>標題</h2>
      <p>內容一</p>
      <p>內容二</p>
      <p>內容三</p>
    </div>`
  })

  // 2.注冊組件
  Vue.component('my-cpn', cpnC)


  const app = new Vue({
    el: "#app",
  })
</script>
</html>

全域組件和區域組件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全域組件和區域組件</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <mycpn2></mycpn2>
</div>

<br>

<div id="app2">
  <mycpn2></mycpn2>
  <mycpn2></mycpn2>
</div>

</body>
<script src="../js/vue.js"></script>
<script>
  const cpnC = Vue.extend({
    template: `
  <div>
      <h2>標題1</h2>
    </div>`
  })

  const cpnC2 = Vue.extend({
    template: `
  <div>
      <h2>標題2</h2>
    </div>`
  })


  //全域組件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app',
  })

  const app2 = new Vue({
    el: '#app2',
    components: {
      // 區域組件
      mycpn2: cpnC2
    }
  })
</script>
</html>

父組件和子組件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父組件和子組件</title>
</head>
<body>
<div id="app">
  <parentc></parentc>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 1.子組件
  const sonC = Vue.extend({
    template: `<div>
                <h2>子組件</h2>
              </div>`
  })

  // 2.父組件
  const parentC = Vue.extend({
    template: `
      <div>
        <h2>父組件</h2>
        <sonc></sonc>
      </div>`,
    components: {
      // 3.將子組件注冊到父組件中
      sonc: sonC
    }
  })

  // vue實體物件可以看做最頂層的組件，root
  const app = new Vue({
    el: '#app',
    components: {
      // 4.將父組件注冊到實體物件
      parentc: parentC
    }
  })
</script>
</html>

組件注冊語法糖寫法

示例1：語法糖寫法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>組件注冊語法糖</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'cpn': {
        template: `
              <div>
                <h2>標題</h2>
              </div>`
      }
    }
  })
</script>
</html>

示例2：將模板抽離

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分離寫法</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn2></cpn2>
</div>

<!--1.使用script標簽，注意：型別必須是text/x-template-->
<script type="text/x-template" id="cpn">
  <div>
    <h2>標題1</h2>
  </div>
</script>

<!--2.使用template標簽-->
<template id="cpn2">
  <div>
    <h2>標題2</h2>
  </div>
</template>

</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: cpn
      },
      cpn2: {
        template: cpn2
      }
    }
  })
</script>
</html>

組件中的data問題

示例1：組件中的data存放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>組件中的data存放</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>{{title}}</h2>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
// 注冊一個全域組件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return {
      title: '我是標題'
    }
  }
})

const app = new Vue({
  el: "#app",
})
</script>
</html>

示例2：為什么組件中的data需要是一個函式

當data是一個函式時：
此時，回傳一個物件，由于地址值不同，所以組件之間的資料互不干擾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data為什么是個函式</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>當前計數：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
// 修改計數器案例，注冊組件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }
})

const app = new Vue({
  el: '#app'
})
</script>
</html>

當data是一個普通物件時：
物件的地址值不會變化，組件之間公用同一套資料，實際程序中產生問題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data為什么是個函式</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>當前計數：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const obj = {
  counter: 0
}

// 修改計數器案例，注冊組件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return obj
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }
})

const app = new Vue({
  el: '#app'
})
</script>
</html>

父子組件通信問題

父傳子

示例：通過props
props傳值
深入了解props

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父傳子</title>
</head>
<body>
<div id="app">
  <!--  v-bind不支持駝峰，要使用駝峰時用“-”連接，例如cMessage => c-message -->
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>cmovies: {{cmovies}}</h2>
    <h2>cmessage: {{cmessage}}</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn = {
  template: '#cpn',
  props: ['cmovies', 'cmessage'],
}

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello  Vue',
    movies: ['海賊王', '海爾兄弟', '海王']
  },
  components: {
    cpn
  }
})
</script>

</html>

子傳父

示例：通過$emit自定義事件傳值
自定義事件傳值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子傳父</title>
</head>
<body>
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <button v-for="item in movies" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn = {
  template: '#cpn',
  data() {
    return {
      movies: [
        {id: 0, name: '海賊王'},
        {id: 1, name: '海王'},
        {id: 2, name: '海爾兄弟'},
        {id: 3, name: '海下兩萬米'},
      ]
    }
  },
  methods: {
    btnClick(item) {
      this.$emit('item-click', item)
    }
  }
}

const app = new Vue({
  el: '#app',
  components: {
    cpn
  },
  methods: {
    cpnClick(item) {
      console.log(item)
    }
  }
})
</script>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/252663.html

標籤：其他

上一篇：JavaWeb三大框架基礎架構——CRUD的基礎功能搭建

下一篇：使用寶塔分分鐘部署前端專案