vue 组件传值

1.父组件向子组件传值（props）

子组件重复调用，根据不同数值渲染不同内容

父组件
将设置的传值变量，值，绑定在子组件的标签上


子组件
子组件接收到传值名称，直接用就行了

2.子组件向父组件传值（$emit）

子组件内部值父组件可直接调用

子组件
定义传的值，事件名

<el-button type="primary" plain @click="submit()">登录</el-button> 
<script>
export default {
  data(){
    return{
      input:'',
      word:'子组件数据' //定义所需传值
      set1:2,
      set2:3,
    }
  },
  methods:{
    submit(){
      this.$emit('getWord',this.word,this.set1,this.set2)  //('触发的事件名',传递参数)
    }
  }
}
</script>

父组件
接收事件，定义自己调用的方法

<el-header>
  <headerr @getWord='getwords'></headerr> //绑定到子组件方法
  /*多变量*/
   <headerr @getWord='getwords(arguments)'></headerr> //绑定到子组件方法
</el-header>

<script>
import headerr from "@/components/common/header";
export default {
  name: "index",
  data() {
    return {
      text:'',
      set_1:'',
      set_2:'',
     };
  },
  components:{headerr},
  methods: {
    getwords(data){  //父组件定义方法取值
      this.text=data;
    }
    /*多变量*/
     getwords(data){  //父组件定义方法取值
      this.text=data[0];
      this.set_1=data[1];
      this.set_2=data[2];
    }
  },
};
</script>

3. 路由传值

query

传参方式：
<router-link :to="{path:'/resultList',query:{word:scope.row.word}}">
<router-link :to="{name:'resultList',query:{word:scope.row.word}}">

接收：
this.$route.query.word

路径会带参数：
http://localhost:8080/resultList?word=11111

实例：表格带参数跳转详情页

//需跳转页面
<el-table-column prop="keywords" label="关键词" ></el-table-column>
<el-table-column prop="result" label="详情" width="110" align="center">
   <template slot-scope="scope">
   <router-link :to="{path:'/resultList',query:{word:scope.row.keywords}}">
    <el-button>详情</el-button>
   </router-link>
 </template>
</el-table-column>

//详情页面
<script>
created(){
   this.text=this.$route.query.word;
},
</script>

params

传参方式：
<router-link :to="{name:'resultList',params:{word:scope.row.word}}">

接收：
this.$route.params.word （页面刷新数据丢失）

路由无参数
http://localhost:8080/resultList