vue组件使用方法
创建实例化Vue对象
第一部分代码段
<div id="vue-app-one">
这里是：{{name}}
</div>
<div id="vue-app-two">
这里是：{{name}}
//创建按钮事件 当执行按钮事件时，改变第一个{{name}}中的值
按钮事件：<button v-on:click="changeName">change-one</button>
</div>
第二部分代码段
<script>
var one=new Vue({
el:'#vue-app-one',
data:{
//第一个{{name}}中的值
'name':'蔡志强'
}
})
var two =new Vue({
el:'#vue-app-two',
data:{
//第二个{{name}}中的值
'name':'蔡志强'
},
//方法事件
methods:{
//执行changName事件后，将'vue-app-one'中的{{name}}值修改为'若离'
changeName:function () {
one.name='若离'
}
}
})
</script>
运行结果：
全局组件
定义和使用
1.定义全局组件，需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；
2.这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签
3.template里必须只有一个根元素
4.在组件中，data是函数，将数据return回去
5.依然可以用this来调用data中定义的数据
定义组件
① 定义一个组件，命名为my-component
② 其中包含数据：name和方法：changeName
③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name
④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)
当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成；
组件定义时也可以用横杆法命名；
如果定义时用myComponent，标签用是OK的，系统自动识别
<div id="vue-app-one">
<my-component></my-component>
</div>
<div id="vue-app-two">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template:'我的名字：{{name}}
',
data(){
return {
//默认字符
'name':'若离'
}
},
methods:{
//按钮事件
changeName:function () {
this.name='蔡志强'
}
}
})
new Vue({
el:'#vue-app-one'
})
new Vue({
el:'#vue-app-two'
})
</script>
运行结果：
局部组件
定义和使用
私有组件的使用
// 注册私有组件
components:{
my-component1
}
定义组件
1.局部组件注册在某个vue对象中
2.只有注册过该局部组件的vue对象才能使用这个局部组件
<div id="vue-app-one">
喜欢的食物:
<msg-component></msg-component>
</div>
<script>
// 局部组件
var msgComponent = {
template: ''
+
'{{food}} ' +
'',
data() {
return {
foods: ['苹果', '草莓', '香蕉']
}
}
}
new Vue({
el: '#vue-app-one',
components: {
//引用
msgComponent
}
})
</script>
运行结果：
通过 Prop 向子组件传递数据
静态传值
<div id="vue-app-one">
<!--在父组件上使用子组件-->
<title-component school="长江大学文理学院" name="蔡志强"></title-component>
</div>
<script>
//创建子组件
var titleComponent = {
props: ['school', 'name'],
template: '{{school}} {{name}}
'
//所需要的数据title有父组件提供
}
Vue.component('', {})
//在父组件中注册components属性中注册子组件
new Vue({
el: '#vue-app-one',
components: {
titleComponent
}
})
</script>
运行结果：
v-bind 动态传值
<div id="vue-app-one">
//v-bind:myName='my_name' 前面是子组件的 后面是父组件的
<title-component v-bind:my-name="my_name"></title-component>
</div>
<script>
var titleComponent={
props:['myName'],
template:'{{myName}}
'
}
new Vue({
el:'#vue-app-one',
components:{
titleComponent
},
data(){
return{
'my_name':'我的名字'
}
}
})
</script>
运行结果：
传递复杂数据
<div id="vue-app-one">
<msg-component v-for="food in foods"
v-bind:food="food" v-bind:key="food.id"></msg-component>
</div>
<script>
//子组件
var msgComponent = {
props: ['food'],
template: '{{food}}
',
}
//父组件
new Vue({
el: '#vue-app-one',
components: {
msgComponent
},
data: {
foods: ['苹果', '香蕉', '草莓']
}
})
</script>
运行结果：
子组件向父组件传值
事件传值$emit
子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件
<div id="vue-app-one">
<msg v-bind:my_name="my_name" v-on:change_name="changeName"></msg>
</div>
<script>
//子组件
Vue.component('msg',{
props:['my_name'],
template:'' +
'{{my_name}}
' +
'' +
'',
})
//父组件
new Vue({
el:'#vue-app-one',
data:{
//默认值
my_name: '蔡志强'
},
methods:{
//接收按钮事件的值 '若离' 当出发点击事件时候改变原来的值
changeName:function (value) {
this.my_name=value
}
}
})
</script>
运行结果：
