详解vue 组件

module.exports = {
 runtimeCompiler: true //默认false
}

const CustomButton = {
 template: "<button>自定义按钮</button>"
};

<template>
 <div>
 <button>自定义按钮</button>
 </div>
</template>

import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)

<template>
 <div id="app">
 <customButton></customButton>
 </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
 name: "App",
 components: { CustomButton }
};
</script>

<template>
 <div id="app">
 <img alt="Vue logo" src="/UploadFiles/2021-04-02/logo.png">

customButton 组件


<template>
 <div id="app">
 <button @click="increment">click me {{times}} times</button>
 </div>
</template>
<script>
export default {
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 return this.times++;
 }
 }
};
</script>


每个组件都会创建一个新实例，组件的data必须是function，因为每个实例维护自己的data数据
组件传参
1. 通过props属性
定义一个button，按钮文本通过props传入


<template>
 <button> {{buttonText}} </button>
</template>
<script>
export default {
 props: {
 buttonText: String
 }
};
</script>


调用者通过attribute传入


<customButton buttonText="Button 1"></customButton>
<customButton buttonText="Button 2"></customButton>
<customButton buttonText="Button 3"></customButton>



运行效果

2. 通过插槽<slot></slot>
组件在需要替换的地方放入插槽<slot></slot>


<template>
 <button style="margin:10px"><slot>Defalt Button</slot></button>
</template>
<script>
export default {
 props: {
 buttonText: String
 }
};
</script>


调用者的innerHtml会替换插槽的值，若为空，使用默认的
运行效果

注意：看到是用自定义组件的innerHtml替换插槽，若插槽只有一个，可以不写name attribute，若多个插槽需指定插槽name attribute
自定义事件
1. 在组件内部调用this.$emit触发自定义事件


<template>
 <div style="margin:10px">
 <button @click="increment">
 <slot>Defalt Button</slot>
 </button>
 <span>Click me {{times}} times</span>
 </div>
</template>
<script>
export default {
 props: {
 buttonText: String
 },
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 this.times++;
 ("increment");
 }
 }
};
</script>


2. 调用者监听自定义事件


<template>
 <div id="app">
 <customButton @increment="handleIncrement"></customButton>
 <customButton @increment="handleIncrement">
 <span style="color:blue">Button 2</span>
 </customButton>
 <customButton @increment="handleIncrement">Button 3</customButton>
 <p>Total click {{totalClicks}} times</p>
 </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
 name: "App",
 components: { CustomButton },
 data() {
 return { totalClicks: 0 };
 },
 methods: {
 handleIncrement() {
 this.totalClicks++;
 }
 }
};
</script>


3. 运行效果

以上就是详解vue 组件的详细内容，更多关于vue组件的资料请关注其它相关文章！