master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
49-定义组件7.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>
    <template id="temp">
      <div>
        <ul>
          <li>{{msg}}</li>
          <li>列表001</li>
        </ul>
      </div>
    </template>
    <div id="app">
      <my-com></my-com>
      <my-com1></my-com1>
      <fourth></fourth>
    </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("myCom", {
      template: "<h1>全局组件</h1>"
    })

    Vue.component("myCom1", {
      template: "#temp",
      data() {
        return {
          msg: "组件数据"
        }
      }
    })

    var app = new Vue({
      el: "#app",
      data: {},
      components: {
        fourth: {
          template: "<h3>私有组件--{{mxg}}</h3>",
          data() {
            return {
              mxg: "私有数据内容"
            }
          },
          methods: {
            changFn() {
              this.mxg = "私有数据已发生改变了"
            }
          },
          mounted: function () {
            this.changFn()
          }
        }
      }
    })
  </script>
</html>