vue components code example
Example 1: vue import component
<template>
<Btn />
</template>
<script>
import Btn from './components/Btn'
export default {
components: { Btn },
}
</script>
Example 2: component in vue
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Example 3: how to access both child event param and parent param in vue
<template>
<ul>
<product v-for="product in products"
:product="product"
@add="addToChart" />
</ul>
</template>
<script>
const Product = {
props: ["product"],
render(h) {
return h("li", { on: { click: this.click } }, this.product);
},
methods: {
click() {
this.$emit("add", { product: this.product, quantity: 42 });
}
}
};
export default {
data() {
return {
products: ["Foo", "Bar"]
};
},
components: {
Product
},
methods: {
addToChart({ product, quantity }) {
console.log(product, quantity);
}
}
}
</script>
Example 4: registeing components in vue
import Sidebar from '../../components/sidebar/main.vue';
export default {
props: [""],
components: {
'sidebar': Sidebar
},
...
Example 5: vue components browser
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
Example 6: import vue
import Vue from 'vue'