定义Vue组件
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：
-
模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
-
组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
全局组件定义的三种方式
-
使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login); -
直接使用 Vue.component 方法：
Vue.component('register', { template: '<h1>注册</h1>' }); -
将模板字符串，定义到script标签种：
<script id="tmpl" type="x-template"> <div> <a href="#">登录</a> | <a href="#">注册</a> </div> </script>同时，需要使用 Vue.component 来定义组件：
Vue.component('account', { template: '#tmpl' });
-
注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
组件中展示数据和响应事件
-
在组件中，
data需要被定义为一个方法，例如：Vue.component('account', { template: '#tmpl', data() { return { msg: '大家好！' } }, methods:{ login(){ alert('点击了登录按钮'); } } });
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象
- 组件可以有自己的data数据
- 组件的data和实例的data有点不一样， 实例中的data 可以为一个对象,但是组件中的data必须是一个方法
- 组件中的data除了必须为一个方法之外， 这个方法内部，还必须返回一个对象才行;
- 组件中的data数据,使用方式，和实例中的data使用方式完全样!! !
- 不同组件之间的数据不相互影响，所以data定义为方法
- 在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的
data属性中的值，需要使用this来访问；
使用components属性定义局部子组件
-
组件实例定义方式：
<script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { // 定义子组件 account: { // account 组件 template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件 components: { // 定义子组件的子组件 login: { // login 组件 template: "<h3>这是登录组件</h3>" } } } } }); </script> -
引用组件：
<div id="app"> <account></account> </div>
使用flag标识符结合v-if和v-else切换组件
-
页面结构：
<div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <my-com1 v-if="flag"></my-com1> <my-com2 v-else="flag"></my-com2> </div> -
Vue实例定义：
<script> Vue.component('myCom1', { template: '<h3>奔波霸</h3>' }) Vue.component('myCom2', { template: '<h3>霸波奔</h3>' }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true }, methods: {} }); </script>
使用:is属性来切换不同的子组件
-
组件实例定义方式：
// 登录组件 const login = Vue.extend({ template: `<div> <h3>登录组件</h3> </div>` }); Vue.component('login', login); // 注册组件 const register = Vue.extend({ template: `<div> <h3>注册组件</h3> </div>` }); Vue.component('register', register); // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { comName: 'login' }, methods: {} }); -
使用
component标签，来引用组件，并通过:is属性来指定要加载的组件：<div id="app"> <a href="#" @click.prevent="comName='login'">登录</a> <a href="#" @click.prevent="comName='register'">注册</a> <hr> <transition mode="out-in"> <component :is="comName"></component> </transition> </div> -
添加切换样式：
<style> .v-enter, .v-leave-to { opacity: 0; transform: translateX(30px); } .v-enter-active, .v-leave-active { position: absolute; transition: all 0.3s ease; } h3{ margin: 0; } </style>
父组件向子组件传值
-
组件实例定义方式，注意：一定要使用
props属性来定义父组件传递过来的数据<script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { template: '<h1>这是子组件 --- {{finfo}}</h1>', props: ['finfo'] } } }); </script> -
使用
v-bind或简化指令，将数据传递到子组件中：<div id="app"> <son :finfo="msg"></son> </div>
子组件向父组件传值
-
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
-
父组件将方法的引用传递给子组件，其中，
getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称<son @func="getMsg"></son> -
子组件内部通过
this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用<div id="app"> <!-- 引用父组件 --> <son @func="getMsg"></son> <!-- 组件模板定义 --> <script type="x-template" id="son"> <div> <input type="button" value="向父组件传值" @click="sendMsg" /> </div> </script> </div> <script> // 子组件的定义方式 Vue.component('son', { template: '#son', // 组件模板Id methods: { sendMsg() { // 按钮的点击事件 this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去 } } }); // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义 alert(val); } } }); </script>
评论列表案例
目标：主要练习父子组件之间传值
使用 this.$refs 来获取DOM元素和组件引用
<div id="app">
<div>
<input type="button" value="获取元素内容" @click="getElement" />
<!-- 使用 ref 获取元素 -->
<h1 ref="myh1">这是一个大大的H1</h1>
<hr>
<!-- 使用 ref 获取子组件 -->
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return {
name: '子组件'
}
}
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件的数据和方法
console.log(this.$refs.mycom.name);
}
}
});
</script>
网友评论