Vue组件使用基础

一、组件的创建

1、组件是可以复用的（重复使用），可以当做标签使用。等同于<p></p>等标签
2、new Vue拥有相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。唯一例外是类似 el 这种根实例特有的选项。

新建组件 Vue(对象).component("组件名",{ })
组件模板以 template:开头

Vue.component("buttom-hello", {
      data: function () {
            return {//必须要有返回值
            };
       },
      template: '<i>这是第一个组件</i>'//组件模板
 });
// 实例化Vue对象
let vm = new Vue({
      el: "#app",
      data: {
      }
 });

使用组件：

<div id="app">
        <h2>组件的应用！</h2>
        <buttom-hello></buttom-hello>
</div>

组件的创建必须放在实例化Vue对象之前

二、组件的使用

1、组件的数据de 使用等同于new Vue数据使用
2、只能有一个根元素

错误：

<script>     
        Vue.component("buttom_hello", {
            data: function () {
                return {
                    massage: '这是第一个组件',
                };
            },
            template: '<i>{{massage}}</i><p>第二个元素</p>'
        });
        let vm = new Vue({
            el: "#app",
            data: {

            }
        });
    </script>

正确：

template: '<div><i>{{massage}}</i><p>第二个元素</p></div>'

三、组件数据父传子

1. 在子组件中定义props属性props:['title','name']
   

<script>
        Vue.component("buttom_hello", {
            props: ['title'],
            data: function () {
                return {
                    massage: '这是第一个组件',
                };
            },
            template: `<div>
                             <i>{{massage}}</i>
                             <strong>{{title}}</strong>
                        </div>`, //字符串模板可以换行
        });
        let vm = new Vue({
            el: "#app",
            data: {

            }
        });
    </script>

2. 父组件使用子组件元素时，传入属性值 <组件名 title="标题"></组件名>
   

 <div id="app">
        <h2>组件的应用！</h2>
        <buttom_hello title="现在是父传子"></buttom_hello>
</div>

如果title是对象传数据的是时候，则用事件绑定的形式

 <div id="app">
        <h2>组件的应用！</h2>
        <buttom_hello :title="对象"></buttom_hello>
</div>

四、组件数据子传父

1. 在子组件中定义触发事件$emit('事件名',[...参数])
   用点击事件更好看到执行的传值：
   

Vue.component("buttom_hello", {
          props: ['title'],
          data: function () {
              return {
                  massage: '这是第一个组件',
              };
          },
          template: `<div><i>{{massage}}</i><strong>{{title}}</strong><button @click ="addBtn">子传父</button></div>`,
          methods: {
              addBtn: function () {
                  this.$emit("fcz", '子传父成功');//将子组件的值用$emit传输(事件,值)
              }
          },
      });

2. 父组件使用子组件元素时，绑定事件<组件名 title="标题" @事件名="函数名"></组件名>

事件名不能使用驼峰命名，可以使用下划线和横杠

 <div id="app">
        <h2>组件的应用！</h2>
        <buttom_hello title="现在是父传子" @fcz="shou"></buttom_hello> 
        <!-- 绑定子组件事件 fcz,函数 shou -->
        <p>{{str}}</p>
    </div>

3. 父组件定义函数名函数接收子组件参数执行事件
   

let vm = new Vue({
            el: "#app",
            data: {
                str: "",
            },
            methods: {
                shou: function (event) {//得到传参
                    this.str = event;//赋值显示
                }
            },
});