vue组件

Posted 2022-07-19 c546170667

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 html 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

<template>
  <div>如果不是为了衣锦返乡，谁愿意远走他乡。</div>
</template>
<script>

我们看到组件中

<template></template>
组件中所有的内容都要在该语句中包含，当然，div 必须要有，根节点必须在DIV中，否则会出错

创建好组件后，在APP.VUE中进行引用，并调用即可。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a/>//进行调用组件
  </div>
</template>
<script>
import aa from ‘./components/content‘  //引用组件
export default 
  name: ‘App‘,
  components:
aa//注册组件
  

</script>

很简单的语法，多联系几次就明白了。

---

父组件嵌套子组件
1.创建obejce1.vue,child.vue组件

父组件

<template>
  <div>
    我是父组件
    <hr />
    <c ref="c"></c>
    <hr />
    <button @click="getMsg()">得到子组件的值</button>
    <hr />
    <button @click="getMessage()">父组件调用子组件的方法</button>
  </div>
</template>
<script>
import c from "./child.vue";
export default 
  data() 
    msg: "我是父组件中的值";
  ,
  components: 
    c
  ,
  methods: 
    getMsg() 
      alert(this.$refs.c.message);
    ,
    getMessage() 
      this.$refs.c.getMessage();
    
  
;
</script>

子组件

从这里我们可以看到，和APP.VUE中的调用方式一样，多练习几次就可以了。

---

父组件得到子组件中的值或调用子组件的方法
父组件

<template>
      <div>
        我是父组件
        <hr>
        <c ref="c">
        </c>
        <hr>
        <button @click="getMsg()">得到子组件的值</button>
        <hr>
        <button @click="getMessage()">父组件调用子组件的方法</button>
      </div>
    </template>
    <script>
    import c from "./child.vue";
    export default 
      data() 
        msg: "我是父组件中的值";
      ,
      components: 
        c
      ,
      methods:
          getMsg()
              alert(this.$refs.c.message)
          ,getMessage()
              this.$refs.c.getMessage();
          
      
    ;
    </script>

子组件：

<template>
    <div>我是子组件</div>
</template>
<script>
export default 
    data()
        return
            message:‘我是子件中的值‘
        
    ,methods:
getMessage()
    alert(‘我是子组件中的方法‘);

    

</script>

1.this.$refs.c.message
2.this.$refs.c.getMessage();
其实上面的关键字就是已经封装好的，直接调用即可，this代表在当前vue里，$refs代表一个引用，c就是我们注册的子组件名称，可以理解为一个对象，然后我们可以通过对象调用值，或方法。是不是和简单？按格式来就好，多练习几次就可以了。