vue组件基本参数
注册全局组件
<!--注册全局组件--> <div id="app"> <!-- 组件使用驼峰命名法使用时候需要使用-小写调用 --> <my-com1></my-com1> </div> <script> /* 使用Vue.component创建组件,参数1为组件名称 */ Vue.component('myCom1', { //通过template属性指定组件要展示的html结构 template: '<h3>Vue.extend创建组件</h3>' }) let vm = new Vue({ el: '#app', data: {} }) </script> <!--注册全局组件--> <div id="app"> <mycom1></mycom1> </div> <!--在被控制的#app外使用template 元素--> <template id="temp1"> <div> <h1>通过template组件</h1> </div> </template> <script> Vue.component('mycom1',{ template:'#temp1' }) let vm=new Vue({ el:'#app', data:{ } }) </script>
注册私有组件
<div id="app2"> <login></login> </div> <template id="temp2"> <h2>私有组件</h2> </template> new Vue({ el:'#app2', data:{}, methods:{}, filters:{}, directives:{}, components:{ //定义私有组件 login:{ template:'#temp2' } }, beforeCreate(){}, created(){}, beforeMount(){}, mounted(){}, beforeUpdate(){}, updated(){}, beforeDestroy(){}, destroyed(){} })
父组件传递值到子组件
<div id="app"> <!--父组件可以在引用子组件时候可以通过属性绑定的形式, 把需要传递给子组件的数组以属性绑定的形式传递--> <com1 :parentmsg="msg"></com1> </div> <script> let vm = new Vue({ el: '#app', data: { msg: '123 父组件' }, methods: {}, components: { //子组件中默认无法访问父组件中的data上的数据和methods中的函数 com1: { /* 组件中的所有props数据都是通过父组件传递的 把父组件传递的属性定义好才能使用父组件传递参数 props中的数据都是只读的 */ props: [ 'parentmsg' ], template: '<h1>子组件--{{parentmsg}}</h1>' } } }) </script>
父组件传递函数到子组件
<div id="app"> <!--父组件向子组件传递方法使用事件绑定机制--> <com2 @func="show"></com2> </div> <template id="temp1"> <div> <h1>这是自组件</h1> <input type="button" value="点击" @click="myClick" /> </div> </template> <script> let vm = new Vue({ el: '#app', data: {}, methods: { show(data) { console.log(data) } }, components: { com2: { template: '#temp1', data() { return { son: { name: '张三', age: 123 } }; }, methods: { myClick() { console.log("ok") //使用emit调用父组件传递函数,第一个参数是函数名称,后边参数为传递的参数 this.$emit('func', this.son) } } } } })