VUE之组件及传参方式

1.组件

• 可以理解为一个自定义html标签
• 是可复用的vue实例,要构造函数Vue的子类

  使用步骤：

  1 创建

const childComponent = Vue.extend({
    template: `<h2>Hello Wrold</h2>`,
});

2.注册

Vue.component("child-component", childComponent);

• 使用Vue.component()静态方法注册的是称为：全局组件
• 组件名: 自定义的html标签

  3.挂载

const vm = new Vue({
    el: "#root",
});

可将第一、二步省略，简写为：Vue.component(组件名,对象字面量表示的组件配置项);再进行第三步挂载，可以达到同样的效果。

Vue.component("child-component", {
    template: `<h2>Hello Wrold</h2>`,
});

HTML代码

<div id="root">
    <child-component></child-component>
    <child-component></child-component>
</div>

———————————————————————

2.全局组件

• 全局可见,声明在vue实例外部
• 组件中的模板代码: 允许存在数据占位符的html字符串
• 模板内容必须写到一对父元素中
• 组件中必须使用函数data()来声明组件变量
• 全局组件可以在多个vue实例共享
• 建议: 通常一个项目只有一个vue实例,所以尽量不要用全局组件,应该使用局部组件

  第1种用法：

  HTML代码

<div id="root">
    <button-inc></button-inc>
</div>

Vue.component("button-inc", {
     template: `
       <div>
         <button @click="count++">点赞: + {{count}}</button>
       </div>
     `,
    data() {
        return {
            count: 0,
        };
    },
});
const vm = new Vue({
    el: "#root",
});

---

第2种用法：

Vue.component("button-inc", {
    template: "#inc",
    data() {
        return {
            count: 0,
        };
    },
});

HTML代码

<div id="root">
    <button-inc></button-inc>
</div>
<template id="inc">
    <div>
        <button @click="count++">点赞: + {{count}}</button>
    </div>
</template>

——————————————————————-

3.局部组件（components）

• 局部组件是属于vue实例的
  HTML代码

<div id="root">
    <hellos></hellos>
</div>
<template id="hello">
    <p>Hello2 {{site}}</p>
</template>

const hellos = {
    template: '#hello',
        data() {
          return {
            site: "php中文网",
          };
        },
    };
const vm = new Vue({
    // el: "#root",//可将此步用后面.$mount("#root")代替
    components: { hellos },
}).$mount("#root");

————————————————————-

4. 组件之间的传参: 父组件向子组件传参

• 父组件通过自定义属性的方式将参数传到子组件中

<div id="app">
    <btn-inc :my-name="username" :my-count="count"><btn-inc>
</div>

const vm = new Vue({
    el: document.querySelector("#app"),
    data() {
        return {
            username: "有声的紫荆",
            count: 0,
          };
    },
    // 局部组件
    //组件之间的数据传递是单向的,不允许在子组件中更新父组件中的数据
    components: {
        btnInc: {
        props: ["myName", "myCount"],
            template: `
            <div>
                <button @click="num++">点赞: + {{num}}</button>
                <span>{{myName}}</span>
                </div>
            `,
            data() {
              return {
                num: this.myCount,
              };
            },
        },
    },
});

——————————————————

5.组件之间的传参: 子组件向父组件传参

• 通过声明同名事件来实现
• $emit(父组件中要使用的方法名称,子组件要传给父组件的值 )

<div id="app">
    <btn-inc :my-name="username" :my-count="count" @click-count="handle"></btn-inc>
</div>

const vm = new Vue({
    el: document.querySelector("#app"),
    data() {
        return {
            username: "有声的紫荆",
            count: 0,
          };
    },
    // 局部组件
    components: {
        btnInc: {
            props: ["myName", "myCount"],
            template: `
            <div>
                <button @click="$emit('click-count',10 )">点赞: + {{myCount}}</button>
                <span>{{myName}}</span>
                </div>
            `,
          },
    },
    // 父组件更新数据的方法
    methods: {
        handle(value) {
            this.count += value;
            this.username = "天蓬老师";
        },
    },
});

——————————————————-

6.组件之间双向传参

<div id="app">
    <p>父组件: {{price}} 元</p>
    <p>
        <span>子组件:</span>
        <my-input :my-price="price" @input-text="handle"></my-input> 元
    </p>
</div>

const vm = new Vue({
    el: document.querySelector("#app"),
    data() {
        return {
            price: 4588,
        };
    },
    // 局部组件
    components: {
        "my-input": {
            props: ["my-price"],
            template: `
             <input type="text" :value="myPrice" @input="foo" />
            `,
        methods: {
            foo(ev) {
                this.$emit("input-text", ev.target.value);
            },
        },
        },
    },
    methods: {
        handle(value) {
            this.price = value;
        },
    },
});

———————————————————

7.插槽: 组件内容分发(<slot></slot>)

<div id="app">
    <my-comp>Wrold</my-comp>
</div>

new Vue({
    el: "#app",
    components: {
        myComp: {
            template: `
                <div>
                    <h2>Hello  <slot>哈哈哈</slot> </h2>
                </div>
            `,
        },
    },
});
//其中“哈哈哈”为默认值，当`<my-comp></my-comp>`之间无内容时，将会把默认值显示出来。