uni-app 中使用组件
<p>在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可</p><p>使用方式和生命周期跟vue一样，具体参考</p>
<p>使用：https://www.cnblogs.com/makalochen/p/13870097.html</p>
<p>单文件组件：https://cn.vuejs.org/v2/guide/single-file-components.html#ad</p>
<p>生命周期：https://cn.vuejs.org/v2/api/#选项-生命周期钩子</p>
<p>这里给出一个示例</p>
<h2 id="基本使用示例">基本使用示例</h2>
<h3 id="创建组件">创建组件</h3>
<p>创建<code>test</code>组件，在component中新建<code>test.vue</code>文件，内容如下</p>
<pre><code><template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<h3 id="其他组件中导入该组件并注册和使用">其他组件中导入该组件并注册和使用</h3>
<h4 id="导入">导入</h4>
<pre><code>import test from '../../components/test.vue';
</code></pre>
<h4 id="注册">注册</h4>
<pre><code>comments:{
test : test
}
</code></pre>
<h4 id="使用">使用</h4>
<pre><code><test></test>
</code></pre>
<h4 id="完整示例">完整示例</h4>
<pre><code><template>
<view>
<test></test>
</view>
</template>
<script>
import test from '../../components/test.vue';
export default{
components:{
test:test
}
}
</script>
<style>
</style>
</code></pre>
<h3 id="效果">效果</h3>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210318104406705-605976266.png" alt="image-20210317180833712" loading="lazy"></p>
<h2 id="组件之间传值">组件之间传值</h2>
<p>https://cn.vuejs.org/v2/guide/components-props.html</p>
<h3 id="父组件给子组件传值">父组件给子组件传值</h3>
<p>https://cn.vuejs.org/v2/guide/components-props.html#传递静态或动态-Prop</p>
<p>组件定义中，通过props来接受外界传递到组件内部的值</p>
<pre><code><template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
</code></pre>
<p>其他组件在使用<code>test</code>组件的时候，使用属性绑定，传递值</p>
<pre><code><template>
<view>
<!-- 属性绑定 -->
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "../../components/test.vue"
export default {
data() {
return {
msg: 'hello'
}
},
//组件注册
components: {
test
}
}
</script>
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210318104406711-2002323359.png" alt="image-20210318101243278" loading="lazy"></p>
<h3 id="子组件给父组件传值">子组件给父组件传值</h3>
<p>https://cn.vuejs.org/v2/guide/components.html#监听子组件事件</p>
<p>定义组件通过<code>$emit</code>触发事件进行传递参数</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '子组件给父组件传值'
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
</code></pre>
<p>父组件中定义自定义事件并接收参数</p>
<pre><code class="language-html"><template>
<view>
<test @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "../../components/test.vue"
export default {
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
</code></pre>
<h5 id="_"><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210318104406709-614400198.png" alt="image-20210318102040664" loading="lazy"></h5>
<h3 id="兄弟组件之间的传值">兄弟组件之间的传值</h3>
<p>uni-app的页面通讯</p>
<p>https://uniapp.dcloud.io/collocation/frame/communication</p>
<p>vue的实现</p>
<p>https://cn.vuejs.org/v2/api/#实例方法-事件</p>
<p>这里因为是uni-app，所以还是使用uni-app官方的</p>
<p>定义<code>a</code>组件</p>
<pre><code><template>
<view>
这是a组件：<button @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
addNum () {
//触发全局的updateNum事件
uni.$emit('updateNum',10);
}
}
}
</script>
<style>
</style>
</code></pre>
<p>定义<code>b</code>组件</p>
<pre><code><template>
<view>
这是b组件的数据:{{num}}
</view>
</template>
<script>
export default {
data() {
return {
num: 0
};
},
//组件创建的时候触发
created(){
//监听全局的updateNum事件
uni.$on('updateNum', num => {
this.num += num
})
}
}
</script>
<style>
</style>
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210318104406708-592132786.png" alt="image-20210318104154965" loading="lazy"></p>
<p>实现了点击修改b组件数据的功能</p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14554215.html
頁:
[1]