Vue之组件使用

Posted 2020-11-20 yinxuejunfeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之组件使用相关的知识，希望对你有一定的参考价值。

如果想要使同一个组件实现不同的效果，那么可以这样做。

把需要封装的组件模板写在template中

<template id="counter-template">
    <h1>{{heading}}</h1>
  <button @click="count+1">Submit{{count}}</button>
</template>

其中在建立组件时，用到了一个props属性，可以读取到引用组件里的自定义属性值，并且随着用户的操作进行动态的改变

我觉得这个属性特别的好，还是很好用的，所以在这里记录一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component</title>
  <script src="Vue.min.js"></script>

</head>
<body>
    <div id="app">
      <counter heading="Likes"></counter>
      <counter heading="DisLikes"></counter>
    </div>
    <template id="counter-template">
        <h1>{{heading}}</h1>
      <button @click="count+1">Submit{{count}}</button>
    </template>
    <script>
       Vue.component(‘counter‘,{
         template:‘#counter-template‘,
         props:[‘heading‘],
         data:function(){
           return { count:0};
         }

       });
    </script>

</body>
</html>

以上是关于Vue之组件使用的主要内容，如果未能解决你的问题，请参考以下文章