vue 组件传教和组件传值
Vue 创建组件的方式
使用 Vue.Extend()和 Vue.component 全局注册组件
首先我们定义一个组件并接收
var com1 =Vue.extend({ template:"这是通过 Vue.extend 创建的组件"});
然后我们全局注册这个组件
Vue.component('mycom1',com1);
这样我们就可以在我们的代码中使用我们的 mycom1 组件了
需要注意的是, 如果我们注册的组件名称是以驼峰命名法来命名的, 那么我们在使用的时候将不能使用原本注册时的命名, 如下的写法时错误的
- // 定义
- Vue.component('myCom1',com1);
- // 使用
我们在使用的时候需要将驼峰命名法的两个单词使用'-'进行分开, 并且更加推荐'-'左右两端的单词均使用小写, 如下
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var com1 =Vue.extend({ template:"这是通过 Vue.extend 创建的组件" }); Vue.component('myCom1',com1); var vm = new Vue({ el:'#app', data:{ } }) </script>
同时我们可以将构造和注册结合在一起
- Vue.component('myCom1',Vue.extend({
- template:"这是通过 Vue.extend 创建的组件" }));
更加简化的方式
- Vue.component('myCom1',{
- template:"这是通过 Vue.extend 创建的组件" });
需要注意的是, 我们不管使用哪种方式来定义组件, template 中定义的顶级元素只能有一个, 否则会出现错误
使用 Vue.component()配合 Vue 的 templete 标签来定义组件
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> Vue.component('myCom1',{ template:"#mycom2" }); var vm = new Vue({ el:'#app', data:{ } }) </script>
需要注意的是, 上述的定义方式都是定以的全局 Vue 对象均可使用, 下面我们定义一个私有的组件
Vue.component 私有组件
Vue 对象内部有一个 components 组件, 可以定义我们想要的组件
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var vm = new Vue({ el:'#app', data:{ }, components:{ login:{ template:'这是私有的 login 组件' } } }) </script>
同时仍然可以使用上述的 template 方式来定义组件
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var vm = new Vue({ el:'#app', data:{ }, components:{ login:{ template:'#app2' } } }) </script>
组件的 data
定义的组件可以有自己的 data 数据域, 但是 data 必须为一个 function 且必须返回一个对象格式的数据, 除此之外和 Vue 对象中的 data 的使用方法完全一致
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var vm = new Vue({ el:'#app', data:{ }, components:{ login:{ template:'#app2', data:function(){ return { msg:"这是组件中的数据" } } } } }) </script>
组件切换
使用 v-if 和 v-else 实现组件切换
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
登录 注册
<script> var vm = new Vue({ el:'#app', data:{ flag:true }, components:{ login:{ template:'#app2', }, register:{ template:'注册组件', } } }) </script>
不过使用这种方式只能实现两种类型的组件切换
使用 component 元素进行组件切换
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
登录 注册
<script> var vm = new Vue({ el:'#app', data:{ comName:'login' }, components:{ login:{ template:'#app2', }, register:{ template:'注册组件', } } }) </script>
我们使用定义在 data 中的属性来切换 component 中要展示的组件, 使用: is 来代表最后要展示的组件的值
父子组件传值
父组件向子组件传递数据
子组件默认无法直接访问到父组件 (对象) 中的数据, 需要使用 v-bind 表达式来传递, 结合组件的 props 属性来使用, 即可达到父组件向子组件传递数据
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var vm = new Vue({ el:'#app', data:{ msg:"这是父组件中的数据" }, components:{ login:{ template:'#app2', data(){ return { name:'zhangsan', age:'24' } }, props:['parentmsg'] } } }) </script>
需要注意的是, 通过 props 传递过来的数据是不推荐被修改的, 强行修改会报错
props 中定义的属性全部都是由父组件传递给子组件的
而子组件 data 中的数据是组件私有, 可以被修改的
子组件向父组件传递数据
子组件向父组件传值是通过父组件向子组件传递事件实现的
<script type="text/javascript" src="lib/vue-2.4.0.js"></script><script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script> <script> var vm = new Vue({ el:'#app', data:{ msg:"这是父组件中的数据" }, methods:{ show(data){ console.log("这是父组件的事件"+data) } }, components:{ login:{ template:'#app2', data(){ return { name:'zhangsan', age:'24' } }, props:['parentmsg'], methods:{ myclick(){ this.$emit('func',this.name); } } } } }) </script>
从如上代码可知, 父组件调用子组件中的数据需要借助 this.$emit 来进行传递, 传递的第一个参数都是函数名, 后面的参数都是传递的数据, 可以传递单个属性或者是对象
来源: https://www.2cto.com/kf/201808/773742.html