组件（五）：其他

时间：2023-04-02 21:15:58 HTML

组件引用——ref,$refs为子组件或原始DOM添加ref特性，可以为其声明引用标签。添加引用后，您可以在Javascriptrefs.refname中使用vm|this.$获取子组件或原始DOM。如果是原始DOM，效果就像document.querySelector(ele);如果是子组件，则返回一个VueComponent实例对象Vue.component('component-1',{props:['subProp'],data:function(){return{subData:"child\'sdata"}},template:'

子组件内容

'})Vue.component('component-2',{template:'

子组件

'})varvm=newVue({el:'#app-1',data:{message:"sendchild\'sprops",subPropVal:"default",subDataVal:"default",commonDomVal:"default",items:[{id:'1',case:'piece'},{id:'2',case:'处决之塔'},{id:'3',case:'狩猎联盟行动'}]},methods:{setVal:function(){this.subDataVal=this.$refs.child.subDatathis.subPropVal=this.$refs.child.subPropthis.commonDomVal=this.$refs.common.valueconsole.log(this.$refs.child)控制台.log(this.$refs.item)console.log(this.$refs.item2)},}});

Value
获取子组件数据属性[{{subDataVal}}]
获取子组件prop属性[{{subPropVal}}]
获取公共DOM元素值[{{commonDomVal}}]

父组件数据定义：message、subPropVal、subDataVal、commonDomVal和items子组件数组定义如下：propssubProp,datasubData我们在一个组件和一个原始的input上添加了ref特性，将父组件的消息通过Prop传递给子组件的subProp。现在，在绑定按钮点击事件的回调中，可以通过this.$refs获取到组件和原始DOM的信息，如果是同v-for一起使用时，this.$refs.refname返回一个数组，引用原始DOM为原始DOM的数组，引用子组件为VueComponent数组，如使用v-for&ref中上面的例子在控制台打印输出如下：混合（Mixins）Vue中没有通用的API来实现组件继承，但是也有一些手段可以在那些多个组件中复用相同的功能，比如这里的Mixin。当多个组件具有相同的属性或方法时，可以将相同的部分抽取出来放到一个Mixins对象中。Vue.mixin({created:function(){console.log('全局混合输入对象')}})varsuperPowersMixin={data:function(){return{superPowers:false,//不会覆盖组件中的`img`img:require('./angular.png'),}},methods:{superMe:function(){this.$el.classList.add("super")this.superPowers=true},goback:function(){this.$el.firstChild.innerText='ForeverStayHere'}},created:function(){this.$options.template='返回'+'添加过滤器'+this.$options.template}}newVue({el:'#app-1',components:{vueImage:{data:function(){return{img:require('./vue.png')}}，模板：“

”，方法：{goback:function(){this.$el.classList.remove("super")this.superPowers=false}},//同名的Hook函数会混合到一个数组中，所以所有混合到对象中的hook都会被在组件本身的挂钩传输之前调用。创建：function(){this.$options.template='

'+this.$options.template+'

'},mixins:[superPowersMixin]},reactImage:{data:function(){返回{img:require('./react.png')}}，模板：“

”，创建：function(){this.$options.template='

'+this.$options.template+'

'},mixins:[superPowersMixin]}}})

在上面的例子中要混合成对象，我们使用属性、模板、方法和钩子函数，我们对不同的选项有不同的合并规则。一般来说，option是一个对象的时候，我们合并成一个大对象。如果对象中存在同名属性，我们就丢弃混入对象中的属性。比如给组件vueImage添加mix-in时，属性img和方法goback()就被丢弃了。钩子函数mix-in和组件没有合并，但是都执行了。mix-in中的hook先被执行，然后组件才被执行。模拟继承使用mixin可以模拟较低的继承系统。varSuperClass={template:'

超级方法{{message}}

',data(){return{message:'superclassdata'}},methods:{superMethod(){this.message='runsuperclassmethodtochangedata'}}}varSubClass={mixins:[SuperClass],template:'

覆盖超级方法\SubMethod{{message}}

',methods:{superMethod(){this.message='overridesuperclassmethod'},subMethod(){this.message='运行子类方法到更改数据'}}}newVue({el:'#app-2',components:{SuperClass,SubClass}})

本例中将superClass混入组件subClass中，属性message继承自superClass，方法为重写了superMethod()，加入了自己的方法subMethod()，感觉可以开发开发了--b。