①组件实例的作用域:
是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享。
父组件向子组件的传值:
要用到一个组件必须有三个步骤:
1、 <组件></组件> //<zi></zi>
2、挂载组件
import zi from '@/components/zi'
3、组件名
components: { zi, },
父组件:
<template>部分
<zi :text="data"></zi>javascript部分:
import zi from '@/components/zi'
export default { name: 'about', data() { return { data: { 'title': '新闻', }, }; }, components: { zi, }, }子组件:
<template>部分
<a :href="url1" class="hide">{{text.title}}>></a>javascript部分:
props: { text: { type: Object }, },
这是通过props传输数据;还可以通过$emit来传输数据
v-on :监听事件
$emit:触发事件
父组件:
</template>部分:
<zi v-on:changeComponentName = "changeComponentName"></zi>
{{componentName }}
js部分:
methods:{ changeComponentName:function(newc){ this.componentName = newc } }子组件:
</template>部分:
<button @click="clissCallback">我是子组件</button>
js部分:
methods:{ clissCallback:function(){ this.$emit("changeComponentName",this.newc) //changeComponentName为自定名称 ,this.newc为要传过去的参数 } }官方文档https://cn.vuejs.org/v2/guide/components.html#Prop