在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如下面的代码，想在父组件中，当满足某个条件时，修改子组件的 activeIndex 的值，该怎么做呢？
import HeaderBox from '../components/HeaderBox.vue'
export default {
components: {
子组件HeaderBox.vue：
export default {
activeIndex: "/loginpage"
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&子组件 ref='xxx'&&/子组件&父组件：
this.refs.xxx.子组件定义的方法()
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如何构建一个组件，组件之前数据如何共享，这是开发中必须要学习的内容。vue.js组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用 props 把数据传给子组件。另外vue.js中提倡单向数据流：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。当子组件需要更新父组件的状态时，我们可以通过事件触发。下面是一个利用props传递数据和使用事件触发父组件状态的典型例子：
&!DOCTYPE html&
&meta charset="utf-8"&
&div id="app"&
{{ message }}
&button v-on:click="parentAtion"&parentAtion&/button&
&child v-bind:param="message"
v-on:childfn="fromChild"&&/child&
&script type="text/x-template" id="child-tpl"&
&span&{{param}}&/span&
&button v-on:click="childAtion"&childAtion&/button&
&script src="///vue/2.1.10/vue.js"&&/script&
&script type="text/javascript"&
ponent('child', {
template: '#child-tpl',
props: ['param'],
methods: {
childAtion: function(){
// 触发事件
this.$emit('childfn', 'child component');
var app = new Vue({
el: '#app',
message: 'Hello vuejs!'
methods: {
parentAtion: function(){
this.message = 'parent component';
fromChild: function(msg){
this.message =
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
试着将data改为props呢？先给props一个默认值，然后在父级组件传入你想要的数据。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在很多Vue项目中，我们使用&<ponent&来定义全局组件，紧接着用new Vue({ el: '#container '})&在每个页面内指定一个容器元素。
这种方案在只是使用 JavaScript 增强某个视图的中小型项目中表现得很好。然而在更复杂的项目中，或者当你的前端完全采用 JavaScript 驱动的时候，以下弊端就显现出来：
全局定义(Global definitions)&强制要求每个 component 中的命名不得重复
字符串模板(String templates)&缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的\
不支持CSS(No CSS support)&意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤(No build step)&限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为&.vue&的&single-file components(单文件组件)&为以上所有问题提供了解决方法，并且还可以使用 Webpack 或 Browserify 等构建工具。
这是一个文件名为&Hello.vue&的简单实例：
现在我们获得：
正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 Jade，Babel (with ES2015 modules)，和 Stylus。
这些特定的语言只是例子，你可以只是简单地使用 Buble，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。
针对刚接触 JavaScript 模块开发系统的用户
有了&.vue&组件，我们就进入了高级 JavaScirpt 应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：
Node Package Manager (NPM): 阅读&&直到&10: Uninstalling global packages章节.
Modern JavaScript with ES2015/16: 阅读 Babel 的&. 你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。
在你花一些时日了解这些资源之后，我们建议你参考&&。只要遵循指示，你就能很快的运行一个用到&.vue&组件，ES2015 和 热重载( hot-reloading ) 的Vue项目!
这个模板使用&，一个能将多个模块打包成最终应用的模块打包工具。&介绍了Webpack的更多相关信息。 学习了这些基础知识后， 你可能想看看&.
在 Webpack中，每个模块被打包到 bundle 之前都由一个相应的 “loader” 来转换，Vue 也提供&&插件来执行&.vue&单文件组件 的转换. 这个&&模板已经为你准备好了所有的东西，但是如果你想了解更多关于&.vue&组件和 Webpack 如何一起运转的信息，你可以阅读&。
针对高级用户
无论你更钟情 Webpack 或是 Browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览&，找到你需要的部分，然后参考 README 中的说明，使用&&工具生成新的项目。
Webpack 中，每个模块在构建前被加载器转变，Vue 官方插件&&用来转变&.vue单文件组件。&&模板已经准备好了一切， 如果要更多了解&.vue&如何和 Webpack 配合工作， 请看&
阅读(...) 评论()Vue单文件组件基础模板小结
作者：kittySlave
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了Vue单文件组件基础模板小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多：
1.代码集中，便于开发、管理和维护
2.可复用性高，直接将vue文件拷贝到新项目中
我暂时就想到这两点，童鞋们可以在评论里帮我补充；因为有这么多优点，所以决定有必要将vue组件的常用配置项提炼出来，形成一个组件模板，方便日后项目开发复用
&template&
&h1&{{title}}&/h1&
&ChildComponents&&/ChildComponents&
&/template&
//子组件要提前引入，才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js脚本或类库
import Cookie from '../lib/cookie.js'
//Js部分尽量采用ES6语法，webpack babel插件会转义兼容
export default {
//组件私有数据（必须是function，而且要return对象类型）
title: '组件标题',
firstName: '',
lastName: '',
//父组件传递过来的数据（两种方式声明：1.数组 2.对象）
//数组方式
props: ['age'],
//对象方式
/*props: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value &= 0
//计算属性
computed: {
fullName () {
return this.firstName + this.lastName
title (preVal, newVal) {
console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`)
//函数集，自己封装，便于开发使用
methods: {
getCurrentDate () {
return new Date().toLocaleDateString()
//生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
beforeCreated () {
console.log('component before created')
//生命周期钩子：组件实例完成创建之后调用
created () {
console.log('component created')
//生命周期钩子：组件实例渲染完成时调用
mounted () {
console.log('component mounted')
//要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
components: {
ChildComponents
&style lang="scss" scoped&
/**使用scss编写样式，既可提高开发效率，也方便维护
* scoped省略后，该样式片段会应用到页面全局
* 支持import语法引入css文件
@import "../base/reset.css";
color: #c23a3f;
以上组件模板中的配置不是最全的，但都是最常用的，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具现有2个vue单文件组件，Vif.vue和Vbind.vue，要在Vif.vue中调用Vbind.vue。
Vif.vue代码如下：
&template&
&divid=&app-3&&
&pv-if=&seen&&现在你看到我了&/p&
&vbind&&/vbind&
&/template&
vbind from
'./Vbind.vue'
beforeCreated () {
console.log('beforeCreated called')
created () {
console.log('created called')
components: {vbind}
Vbind.vue代码如下：
&template&
&divid=&app-2&&
&spanv-bind:title=&message&&
鼠标悬停几秒钟查看此处动态绑定的提示信息！
&/template&
'页面加载于 ' &#43; new
Date().toLocaleString()
运行后页面如下
本文已收录于以下专栏：
相关文章推荐
这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack，在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：
webpack入坑之旅（...
通过之前我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。
Vue 可以通过 Webpack 等第三方工具实现单文件的开发的方式。
当然这里会牵扯到...
Webpack + vue-loader构建单文件vue组件
子组件和父组件传递数据父组件向子组件传递数据：
栗子1：父组件A向子组件A-1传递参数：currStudentId，有两种传递方式：第一种传递方式，是使用静态传递方式，打个比方A-1组件中，需要的是...
Vue---组件之间的数据传递
在开发中，不可避免的要碰到需要兄弟组件之间相互通信的地方，在Vue的1.0版本中，我曾经采取的方式是通过两个兄弟组件的共同父级进行通信。主要用到$dispatch和$broadcast这两个方法。但在...
熟悉了Vue.js的同级组件之间通信，写此文章，以便记录。
Vue是一个轻量级的渐进式框架，对于它的一些特性和优点，请在官网上进行查看，不再赘述。
使用NPM及相关命令行工具初始化的Vue工程...
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。组件组件与组件之间，还存在着不同的关系。父子关...
最近在学习VUE，在组件这块遇到了一些问题，记录下来，以便以后查看
&#160; &#160; &#160; &#160; &#160; &#160; &#160; 1、父组件传递数据给子组件
&#160; &#160; ...
关于组件之间的数据传递，通过我们昨天的文章应该已经有了简单的了解。昨天我们说了父组件向子组件通过Props选项传递数据。那么我们今天就来看看子组件向父组件通过event传递数据。自定义事件我们知道，父...
他的最新文章
讲师：姜飞俊
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)