master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
45-定义组件3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的定义使用</title>
  </head>
  <body>
    <div id="app">
      <div>
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
        <se-cond></se-cond>
        <third></third>
      </div>
      <h4 style="color: red">让3个按钮从相互影响到不影响</h4>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    Vue.component("my-component", {
      template: '<button @click="counter++" type="button">{{counter}}<button>',
      data: function () {
        return {
          counter: 0
        }
      }
    })

    Vue.component("third", {
      template: "<div>{{message}}</div>",
      data: function () {
        return {
          message: "组件内容"
        }
      }
    })

    var Child = {
      template: "<div>私有组件内容</div>"
    }

    // var data = {
    //   counter: 0
    // }
    var app = new Vue({
      el: "#app",
      data: {},
      components: {
        "se-cond": Child
      }
    })
  </script>
  <!-- <h5>自定义的标签就是组件,每个标签代表一个组件</h5> -->
  <!-- 注意
    1、任何使用Vue的地方都可以使用组件
    2、组件需要注册后才能使用。注册有全局注册和局部 注册两种方式。
--></html>