vue笔记-14（组件-私有组件和组件的数据与方法）

2020-09-24 本文已影响0人 7ColorLotus

私有组件和组件的数据与方法

定义实例内部私有组件

只能被某个vm实例使用的组件
通过vue对象的components指定定义

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>私有组件</title>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
<body>
 <div id="app">
     <!-- 只能在app下使用 -->
     <com2></com2>
 </div>
 <script>
     var vm = new Vue({
         el :"#app",
         components: {  //需要vm中定义components
             com2:{
                 template: '<h2>这是私有组件</h2>'
             }
         }
     })
 </script>
</body>
</html>

组件中的data和methods

组件中的data,必须是一个方法，并且返回一个对象

    Vue.component('mycom1', {
        template: '<h1>这是全局组件</h1>',
        data: function(){ //是一个方法
            return {} //返回一个对象
        }
    })

组件中的data使用方式，与vue实例中的data使用方式完全一样
组件中的方法定义和使用与实例中的一样
组件中的data和methods代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件中的data和method</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
<body>
  <div id="app">
      <mycom3></mycom3>
  </div>


  <template id="tmpl1">
      <div>
          <!-- 使用组件中的变量 -->
          <h3>这是template元素，在外部定义的组件结构，{{ msg }}</h3>
          <!-- 使用组件中的方法-->
          <a href=":;" @click.prevent="hello()">点我</a>
      </div>
  </template>

  <script>
      Vue.component('mycom3',{
          template: '#tmpl1',
          data: function(){  //组件data，通过方法定义，返回一个对象
              return { msg : '我是组件中的data' }
          },
          methods: { // 组件方法与vue实例中的一样
              hello(){
                  alert('我是组件中的方法')
              }
          }
      })

      var vm = new Vue({
          el :"#app"
      })
  </script>
</body>
</html>

vue笔记-14（组件-私有组件和组件的数据与方法）

私有组件和组件的数据与方法

猜你喜欢

热点阅读