这两天在学Vue,记录一下我认为比较重要的东西
Vue中的组件通信:
我们可以分为3个步骤来:
1.声明局部子组件,简称 "声子",
2.挂载到dom树上面去,简称:"挂子"
3.进行使用,简称:"用子"
上面写的别人可能看不太明白,毕竟只是我的看法:
<body>
<div id="app">
</div>
</body>
先写一个div,给它一个ID=app
<script>
var Vheard = {
template: `
<div>我是头部组件</div>
`
}
//声子
var App = {
template: `
<div>
<Vheard />
</div>
`,
components: {
Vheard
}
}
var vm = new Vue({
el: "#app",
data() {
return {
}
},
components: {
//挂子
App
},
//用子
template: `
<App />
`
});
</script>
父组件向子组件传递信息
子组件向父组件传递信息
<script>
//孩子
Vue.component(‘Child‘, {
data() {
return {
textProp: this.childData
}
},
template: `
<div>
我是孩子
<p>{{textProp}}</p>
<input type=‘text‘ v-model=‘textProp‘
@input=‘childValue(textProp)‘ />
</div>
`,
props: [‘childData‘],
methods: {
childValue(val) {
this.$emit(‘childHeard‘, val)
}
}
})
//父亲
Vue.component(‘Parent‘, {
data() {
return {
msg: ‘加班好玩吗?‘
}
},
template: `
<div>
我是父亲
<Child :childData=‘msg‘ @childHeard=‘childHeard‘ />
</div>
`,
methods: {
childHeard(val) {
console.log(val)
}
}
})
//声子
var App = {
template: `
<div>
<Parent />
</div>
`
}
var vm = new Vue({
el: ‘#app‘,
data() {
return {
}
},
//用子
components: {
App
},
//挂子
template: `
<App />
`
})
</script>
原文地址：https://www.cnblogs.com/a973692898/p/12683735.html
时间： 2024-08-03 02:32:57