一.基本的组件注册
1)全局组件注册
<div id="xxoo"> <button-co></button-co> //自定义的组件 </div>
<script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("button-co", { //button-co 是组件名称 随便起
data: function () {
return { //data是组件数据
count: 0
}
},
template: "<button @click='count++'>点击了{{count}}次</button>" //template组件模板内容
})
var pp = new Vue({
el: "#xxoo",
data: {
},
methods: {
},
})
</script>
~~组件注册注意事项
(1)data必须是一个函数
(2)组件模板内容必须是单个跟元素,要有父元素,可以加个div就行,都是兄弟元素会报错
(3)组件模板内容可以是模板字符串
(4)如果使用驼峰命名法命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件
全局组件模板样式
Vue.component(组件名称,{
data:组件数据,
template:组件模板内容
})
2).局部的组件注册
<div id="xxoo">
<!-- 局部组件 -->
<hello-world></hello-world>
<hello-poter></hello-poter>
<hello-jerry></hello-jerry>
</div>
<script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var HelloWorld ={
data:function(){
return {
msg:"HelloWorld"
}
},
template:`
<div>{{msg}}</div>
`,
}
var HelloPoter ={
data:function(){
return {
msg:"HelloPoter"
}
},
template:`
<div>{{msg}}</div>
`,
}
var HelloJerry ={
data:function(){
return {
msg:"HelloJerry"
}
},
template:`
<div>{{msg}}</div>
`,
}
var pp = new Vue({
el:"#xxoo",
data:{
},
components:{
"hello-world":HelloWorld,
"hello-poter":HelloPoter,
"hello-jerry":HelloJerry,
}
})
</script>
局部组件需要注意: 局部组件只能在注册他的父组件中使用
二.VUE调试工具
三.组件间数据交互
(1)父组件向子组件传值
-----1`组件内部通过props接收传递过来的值
Vue.component("div-item",{
props:["title"], //通过props接收传递过来的值(用在template中)
template:"<div>{{title}}</div>"
})
-----2`父组件通过属性将值传递给子组件 (两种方式)
第一种写死的静态方式 : <div-item title="来自父组件的数据"></div-item>
第二种data中的动态属性方式: <div-item :title="title"></div-item> //"title"在new Vue 的data中
示例:
<div id="xxoo">
<div>{{msgf}}</div>
<div-item title="来自父组件中的值" content="hello">{{msg}}</div-item>
<div-item :title="ptitle" content="hello">{{msg}}</div-item>
<!-- 动态绑定属性 ptitle是vue中data的值 -->
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("div-item",{
data:function(){
return {
msg:"子组件本身的数据",
}
},
props:["title","content"], //通过props 接收传递过来的值
template:`
<div>
{{msg +"-----" +title + "----" +content}}
</div>
`,
})
var pp = new Vue({
el:"#xxoo",
data:{
msgf:"父组件中的数据",
ptitle:"动态绑定属性"
},
methods:{
},
})
</script>
注:数据传输时props的数据传输规则:
`在正常的html模板中 也就是正常的html5中 不能用驼峰命名法,要用横线-形式分割 如
`在字符串模板中没有这个限制
<div-alem menu-title = "hello"></div-alem> //要用横线-分隔 表达Vue.component 中 props 的menuTitle
Vue.component("div-alem",{
props:["meunTitle"],
template:"<div>{{menuTitle}}"</div> //在javascript中是驼峰式的
})
(1)子组件向父组件传值
props传递数据原则:单项数据流
~~~(1)父组件监听子组件的事件
~~~(2)子组件通过自定义事件向父组件传递信息
在Vue中,当父组件向子组件传递数据之后,子组件应该不能直接修改父组件传递的数据(单向数据流)
当我们修改父组件传递过来的普通类型的数据时,Vue会报错
当我们修改父组件传递过来的对象的属性的时候,是可以进行修改的,也不会报错,也不违反单向数据流
当我们对父组件传递过来的数组进行元素操作的时候,也可以进行操作,也不会报错
结论:如果希望子组件可以更改到父组件中的数据,可以考虑传递一个对象或者数组,此时修改对象的属性,或者操作数组中的元素会直接影响到父组件中的数据
<div id="xxoo">
<div :style="{fontSize:fontSize + 'px'}">{{pmasg}}</div>
<div-one :msg11="msg1" @enlarge-text="handle"></div-one> //父组件监听子组件的事件
</div>
<script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("div-one", {
data: function () {
return {
}
},
props: ["msg11"],
template: `
<div>
<div :key="index" v-for="(item,index) in msg11">{{item}}</div>
<button @click='msg11.push("123")'>点击</button>
<button @click="$emit('enlarge-text')">扩大父组件中字体大小</button> //子组件通过自定义事件向父组件传递信息
</div>
`,
})
var pp = new Vue({
el: "#xxoo",
data: {
pmasg:"父组件中内容!",
fontSize:10,
msg1: [
"超越",
]
},
methods: {
handle:function(){
var n =0;
console.log(this.fontSize)
this.fontSize += 5;
console.log(n)
}
},
})
</script>