这两天在学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>