注意:
1、Vue自定义组件名,最好全部小写,词之间可用"-"隔开,比如:book-lists
2、template:"#tt_myFun1"和el:"#box1",都有:"#",不要漏写了。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>自定义组件:全局组件、局部组件</title>
<style>
</style>
</head>
<body>
<h3>自定义组件大全</h3>
<my-component1></my-component1>
<!--1原始组件 -->
<div id="box1">
<h3>----------1.原始组件.begin------------</h3>
<test></test>
<div>
<h3>------2.自定义组件begin-------------------</h3>
<my-Component1></my-Component1>
<h3>------自定义组件.end--------------</h3>
</div>
</div>
<!--2.自定义组件-->
<template id="tt3">
<div>
<p>hello everyone!</p>
<span>这是组件的第2行</span>
</div>
</template>
<!--3.带方法的自定义组件-->
<template id="tt_myFun1">
<div>
<p @click="clickMe()">姓名:{{name}} ----年龄:{{age}}-----<span>点击次数:{{times}}</span></p>
</div>
</template>
<div id="div_myFun1">
<h3>------3.带方法的自定义组件begin-------------------</h3>
<!--<test3></test3>-->
<my-Funcomponent1></my-Funcomponent1>
<span>一定要将驼峰命名,转化为:中间加一杠。myFuncomponent1-->my-Funcomponent1。Vue官方建议:全部小写。</span>
<h3>------自定义组件.end--------------</h3>
</div>
<div id="div_myFun2">
<h3>------4.给自定义组件传参begin-------------------</h3>
<my-Com2 msg="书影音"
imgsrc="http://pic.bizhi360.com/bpic/30/6730.jpg">
</my-Com2>
<h3>------自定义组件传参.end--------------</h3>
</div>
<template id="tt4">
<div>
<span>{{msg}}</span>
<img v-bind:src="imgsrc">
</div>
</template>
</body>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script >
var times=5;
// <!--1.全局组件-->
Vue.component("test",{
template:"<div>hello world!</div>"
});
Vue.component("myComponent1", {
template: "#tt3"
});
var v1=new Vue({
el:"#box1",
}) ;
// 带方法的自定义组件
Vue.component("myFuncomponent1",{
template:"#tt_myFun1",
data:function () {
return{
name:"tom",
age:18,
times:5,
}
},
methods:{
clickMe:function () {
this.times++;
alert("点了"+ this.times+ "次了,烦不烦!");
}
}
});
var v2=new Vue({
el:"#div_myFun1",
// 带方法的自定义组件
});
//给自定义组件传参
Vue.component("myCom2",{
props:['msg','imgsrc'],
template:"#tt4",
});
var v3= new Vue({
el:"#div_myFun2", //给自定义组件传参
});
</script>
</html>
Vue自定义组件:全局组件、局部组件0923
最新推荐文章于 2024-05-10 12:27:58 发布