标签：span import ams label 引用 点击 ret script log
vue官方文档中定义组件通过调用Vue.component方法，一般没使用
一个组件为一个vue文件，包含template（必须有），script，style三部分
//com.vue
<template lang="html"> <div>//只能有一个html标签包裹里面所有节点 child component{{name}}
</div> </template> <script> export default{
data(){//data部分必须是个函数，返回一个对象。当前组件可以使用data里面的数据
return {
name:‘com‘
}
}
} </script> <style lang="css"> </style>
比如在App.vue中引用上面的com.vue，三步：import组件，在components里注入，在template使用
<template>
<div id="app">
<com></com>
</div>
</template>
<script>
import com from "./components/com.vue"
export default {
name: ‘App‘,
components:{
com
}
}
</script>
上面例子中，App.vue的components上挂载了component这个组件，其中App.vue是父组件，component是子组件。
在子组件中声明props，接收父组件传过来的数据。
ps：props数据传递是单向的，只能从外到里传递。
<template lang="html"> <div> 年龄：{{age}} 名称：{{name}} </div> </template> <script> export default{ props:[‘age‘], data(){ return{ name:‘com‘ } } } </script> <style lang="css"> </style>
在父组件中传递age这个数据：（可以传递静态数据或者动态数据）
<template lang="html">
<div>
<com age="19"></com>//静态数据
<com :age="ageNum"></com>//动态数据：变量
</div>
</template>
<script>
import com from "./components/com.vue"
export default{
components: {
com
},
data(){
return {
ageNum: 18
}
}
}
</script>
<style lang="css">
</style>
通过自定义事件，可以将子组件的数据发送到父组件。自定义事件使用$emit。比如下面，点击子组件的这个按钮（子组件接收的用户行为），触发父组件自定义的patch事件，执行patch事件的处理函数msg3，改变父组件的ageNum数据
在子组件中代码：
<button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button>
父组件中代码：
<com :age="ageNum" @patch=‘msg3‘></com>//动态数据：变量
export default{
data(){
return {
ageNum: 18
}
},
methods: {
msg3(params){
//params:子组件传递过来的参数
this.ageNum++
}
}
}
除了前面传递变量改变组件，slot给组件定义了一个插槽，根据组件的使用者，可以在slot处插入其他的内容，使组件具有更大的灵活性,达到动态改变组件的目的。
比如有这么个需求，一个组件中，有body部分，有footer部分，而不同页面引用这个组件，需要用不同的footer，这是时候，这个footer部分，就可以用slot来实现。
如何使用插槽
子组件中
<template lang="html"> <div>
<slot name="a"></slot> <button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button> <slot name="b"></slot> </div> </template>
父组件中
<template lang="html"> <div> <com age="19">
<h1 slot="a">加在子组件slot的name为a的位置处</h1>
<h1 slot="b">加在子组件slot的name为b的位置处</h1>
</com>//静态数据 </div> </template>
标签：span import ams label 引用 点击 ret script log
原文地址：https://www.cnblogs.com/yaoyao-sun/p/10363246.html
